使用 javascript 获取具有多个下拉菜单的选项的选定值

Question

我有多个功能，其中有多个选项需要在选择一个选项时进行更新。我还需要通过属性元素传递第三条数据。

.getElementById() 适用于单个下拉菜单，但是当页面上有多个菜单时如何让它工作？

我试过var e = document.getElementsByClassName("testClass");，但没有用。

我还尝试创建 optionsText 和 optionsValue，方法与 optionsFtr 使用 var optionsValue = $('option:selected', this).value; 创建的方法相同，但也没有用。

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

HTML代码

<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代码

$(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>");
    });
});

Answer 1

要读取 select 值，您只需使用 $(this).val()。要获得 selected 选项标签，您应该使用 text() 方法。

固定代码如下所示：

$("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>");
});

演示： http://jsfiddle.net/8awqLek4/3/

Answer 2

应该这样做：

$(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>");
        });
});

使用this关键字。比您可以访问 select 目标，并结合查找 :selected select 或者您可以找到当前 selected.

的选项元素

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

使用 javascript 获取具有多个下拉菜单的选项的选定值

Get selected value of option with multiple dropdown menus using javascript

javascript

html

drop-down-menu

selectedindex