Question

你好我在jquery中有一些问题来隐藏选项选项列表中的选项，它可以工作但不能在选项中工作。像这样：

<label>Province</label>
<select class="form-control" name="province" id="province">
        <option value="prov001"> Prov 001</option>
        <option value="prov002"> Prov 002</option>
        <option value="prov003"> Prov 003</option>              
</select>

<label>City</label>
<select class="form-control" name="city" id="city">
        <option class="cty" id="prov001" value="city001"> City 001</option>
        <option class="cty" id="prov002" value="city002"> City 002</option>
        <option class="cty" id="prov003" value="city003"> City 003</option>
        <option class="cty" id="prov001" value="city004"> City 004</option>
        <option class="cty" id="prov002" value="city005"> City 005</option>
        <option class="cty" id="prov003" value="city006"> City 001</option> 
</select>

这是jquery：

$(function() {
    $('#province').change(function(){
        $('.cty').hide();
        $('#' + $(this).val()).show();
    });
});

之前我在div中使用但在选项中没有，谢谢

Answer 1

在选择列表选项中，您有多个相同的ID - 您需要将这些更改为类并修改js：

＆＃13;

//js
$(function() {
    $('#province').change(function(){
        $('.cty').hide();
        $('.' + $(this).val()).show();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Province</label>
<select class="form-control" name="province" id="province">
        <option value="prov001"> Prov 001</option>
        <option value="prov002"> Prov 002</option>
        <option value="prov003"> Prov 003</option>              
</select>

<select class="form-control" name="city" id="city">
        <option class="cty prov001" value="city001"> City 001</option>
        <option class="cty prov002" value="city002"> City 002</option>
        <option class="cty prov003" value="city003"> City 003</option>
        <option class="cty prov001" value="city004"> City 004</option>
        <option class="cty prov002" value="city005"> City 005</option>
        <option class="cty prov003" value="city006"> City 001</option> 
</select>

＆＃13;

Answer 2

最好使用数据属性，而不是具有相同id的多个元素。

你的问题也是关于jQuery而不是Ajax。

<label>Province</label>
<select class="form-control" name="province" id="province">
    <option value=""> All City</option>
    <option value="prov001"> Prov 001</option>
    <option value="prov002"> Prov 002</option>
    <option value="prov003"> Prov 003</option>
</select>

<label>City</label>
<select class="form-control" name="city" id="city">
    <option class="cty" data-id="prov001" value="city001"> City 001</option>
    <option class="cty" data-id="prov002" value="city002"> City 002</option>
    <option class="cty" data-id="prov003" value="city003"> City 003</option>
    <option class="cty" data-id="prov001" value="city004"> City 004</option>
    <option class="cty" data-id="prov002" value="city005"> City 005</option>
    <option class="cty" data-id="prov003" value="city006"> City 001</option>
</select>

$(function () {
    $('#province').change(function () {
        var $item = $(this);
        var id = $item.val();
        if (id === "") {
           $(".cty").show();
        } else {
           $(".cty").hide();
           $(".cty[data-id='" + id + "']").show();
        }
     });
 });

如何使用jQuery隐藏从select选项中选择的选项列表

2 个答案: