jquery - 如何让一个下拉列表的选项确定另一个下拉列表中可用的选项？

Question

它最初可以工作，但会选择所有选项而不是适当的选项。我的 jQuery 同时选择棒球和足球选项值。有人可以帮我解决吗？

HTML

<div class="formControl">
    <label>Sport</label>
    <select id="sport">
        <option value="">--Select--</option>
        <option value="football">Football</option>
        <option value="baseball">Baseball</option>
    </select>
</div>
<div class="formControl">
    <label>Equipment</label>
    <select id="equipment">
        <option value=""></option>
        <option value="football">Helmet</option>
        <option value="football">Pads</option>
        <option value="baseball">Bat</option>
        <option value="baseball">Gloves</option>
    </select>
</div>

jQuery

$("#sport").change(function(){
    $("#equipment").val($(this).val());
});

Answer 1

一种方法是拥有 2 个不同<select>的列表并显示活动的列表。

演示

HTML

<div class="formControl">
    <label>Sport</label>
    <select id="sport">
        <option value="">--Select--</option>
        <option value="football">Football</option>
        <option value="baseball">Baseball</option>
    </select>
</div>
<div class="formControl">
    <div id="football" class="equipment">
        <label>Equipment</label>
        <select id="football-equipment">
            <option value=""></option>
            <option value="football">Helmet</option>
            <option value="football">Pads</option>
        </select>
    </div>
    <div id="baseball" class="equipment">
        <label>Equipment</label>
        <select id="baseball-equipment">
            <option value=""></option>
            <option value="baseball">Bat</option>
            <option value="baseball">Gloves</option>
        </select>
    </div>
</div>

jQuery

$(function () {
    $('.equipment').hide();
});

$("#sport").change(function () {
    var val = $(this).val();
    $('.equipment').hide();
    $('#' + val).show();
});