Get selected value of option with multiple dropdown menus using javascript

Question

I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.

.getElementById() works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?

I have tried var e = document.getElementsByClassName("testClass"); which did not work.

I also tried to create optionsText & optionsValue in the same way that optionsFtr is created with var optionsValue = $('option:selected', this).value; and that didn't work either.

http://jsfiddle.net/8awqLek4/4/

HTML Code

<ul>
    <li>
        <div class="ftrsTitle">BODY</div>
        <select class="testClass" id="testId">
            <option>Select</option>
            <option ftr="bod" value="blk">Black</option>
            <option ftr="bod" value="grn">Kelly Green</option>
            <option ftr="bod" value="red">Red</option>
            <option ftr="bod" value="roy">Royal</option>
        </select>
    </li>
    <li>
        <div class="ftrsTitle">TRIM</div>
        <select class="testClass">
            <option>Select</option>
            <option ftr="trm" value="blk">Black</option>
            <option ftr="trm" value="grn">Kelly Green</option>
            <option ftr="trm" value="red">Red</option>
            <option ftr="trm" value="roy">Royal</option>
        </select>
    </li>
</ul>
<div id="vars"></div>

Javascript Code

$(document).ready(function () {
    $("select").on('change', function () {
        var e = document.getElementById("testId");
        var optionsText = e.options[e.selectedIndex].text;
        var optionsValue = e.options[e.selectedIndex].value;
        var optionsFtr = $('option:selected', this).attr('ftr');
        $("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
    });
});

dfsq · Accepted Answer · 2015-02-25 20:48:28Z

1

To read select value you can simply use $(this).val(). To get selected option label you should use text() method.

Fixed code looks like this:

$("select").on('change', function () {
    var optionsText = $('option:selected', this).text();
    var optionsValue = $(this).val();
    var optionsFtr = $('option:selected', this).attr('ftr');
    $("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});

Demo: http://jsfiddle.net/8awqLek4/3/

answered Feb 25, 2015 at 20:48

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user27068 Over a year ago

Oh sweet, I just figured out this convoluted method of finding the ID and then referencing that: var selectId = this.id; var e = document.getElementById(selectId); jsfiddle.net/8awqLek4/6 But this is way better :) Thanks!

Mouser · Accepted Answer · 2015-02-25 21:08:31Z

0

This should do it:

$(document).ready(function(){
    $("select").on('change', function(){
                var e = $(this).find("option:selected");
                $("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
        });
});

use the this keyword. Than you can access the select targeted, and with find in combination with the :selected selector you can find the option element currently selected.

http://jsfiddle.net/8awqLek4/5/

edited Feb 25, 2015 at 21:08

answered Feb 25, 2015 at 20:51

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Collectives™ on Stack Overflow

Get selected value of option with multiple dropdown menus using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related