获取 jquery 中切换 select 字段的值

Question

我正在尝试根据先前的更改 selection 获取 selection 的值。这是显示或隐藏下一个 select 的初始 html:

<div class="selectOptionCat">
    <select class="categoryName1 changeFields" name="option">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

根据上述 selection 另一个 selection 使用更改功能隐藏或显示：

<div id="firstOption" class="selectOptionsWrapper variableSelector">
    <select class="chipsTaste1 changeFields" name="optionA">
        <option value="1a">One A</option>
        <option value="2a">Two A</option>                   
    </select>
</div>

<div id="secondOption" class="selectOptionsWrapper variableSelector">
    <select class="chipsTaste1 changeFields" name="optionB">
        <option value="1b">One A</option>
        <option value="2b">Two A</option>                   
    </select>
</div>

<div id="thirdOption" class="selectOptionsWrapper variableSelector">
    <select class="chipsTaste1 changeFields" name="optionC">
        <option value="1c">One A</option>
        <option value="2c">Two A</option>                   
    </select>
</div>

但是它只返回第一个选项的值。

js 部分：

function getValues() {
    // can only get the value of the firstOption???
    var chipsTaste = $('.chipsTaste1').val();
}

    $(".wrapper").on('change', '.categoryName1', function() {

        $('.variableSelector').css('display','none');

        if ($(".categoryName1 ").val() == "1") {
           $('#firstOption').css('display','block');
        }else if($(".categoryName1 ").val() == "2") {
           $('#secondOption').css('display','block');
        }else($(".categoryName1 ").val() == "3") {
           $('#thirdOption').css('display','block');
        }   
    });

上面的两个 html 部分被包裹在 div 和 class .wrapper getValues 函数位于脚本后面的单击函数内。任何帮助深表感谢。谢谢！

Answer 1

val() 方法 returns 第一个匹配元素的值，无论是否隐藏。

要仅显示可见 select 的值，请更改：

var chipsTaste = $('.chipsTaste1').val();

… 对此：

var chipsTaste = $('.chipsTaste1:visible').val();

Fiddle

获取 jquery 中切换 select 字段的值

Getting value of toggled select fields in jquery

jquery

onchange