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

Hallo guys i ve some problem in jquery to hide option from select option list, it work in but not work in option. Like this :

你好我们在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>

and this the jquery :

这个jquery：

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

before this i use in div works but in option not, thanks

在此之前，我在div工作，但在选项不，谢谢

2 个解决方案

#1

In the select list options, you have multiple id's that are the same - you need to change these to be classes and modify the js:

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

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

<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>

#2

its better to use data attribute other than have multiple elements with same id.

除了具有相同id的多个元素之外，最好使用数据属性。

also your question is about jQuery not Ajax.

你的问题是关于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();
        }
     });
 });

#1