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>列表并显示活动列表。

Demo

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

如何确定一个下拉列表选项，以确定另一个下拉列表中的可用选项？

1 个答案: