Get Selected Value Of Option With Multiple Dropdown Menus Using Javascript

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. .ge

Solution 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/

Solution 2:

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/