jquery - 获取 jquery 中切换选择字段的值

Question

我试图根据先前的更改选择来获取选择的值。这是显示或隐藏下一个选择的初始 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>

根据上述选择，使用更改功能隐藏或显示另一个选择:

<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 部分被包装在一个带有 .wrapper 类的 div 中getValues 函数位于脚本后面的 click 函数内。任何帮助深表感谢。谢谢!

Answer 1

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

要仅显示可见选择的值，请更改此:

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

…对此:

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

Fiddle