jQuery仅在选中时显示ID选项{help}

Question

我只想按ID显示所选类别的子类别。
我尝试使用分离的select ，但是使用相同的名称很长，因为它需要检查每个名称是否为空...
也许我错了...我需要一些想法。

这是我的HTML：

        <select class="form-control" name="catname" id="catname">
            <option value="">Zgjidh Kategorine</option>
            <option value="AUTOMJETE">AUTOMJETE</option>
            <option value="VENDBANIME">VENDBANIME</option>
            <option value="ELEKTRONIK">ELEKTRONIK</option>
            <option value="SPORT">SPORT</option>
            <option value="BIZNES-DHE-PUNE">BIZNES DHE PUNE</option>
            <option value="TE-TJERA">TE TJERA</option>
        </select>
    </div>
</div>
<div class="col-md-4" id="AUTOMJETE">
    <div class="form-group">
        <label>Zgjidh Nen-Kategorine</label>
        <select name="subname" class="form-control">
            <option value="">Zgjidh Nen-Kategorine</option>
            <option id="AUTOMJETE" value="Makina">Makina</option>
            <option id="AUTOMJETE" value="Pjese Kembimi">Pjese Kembimi</option>
            <option id="AUTOMJETE" value="Motocikleta">Motocikleta</option>
            <option id="AUTOMJETE" value="Makineri Tonazh i Rende">Makineri Tonazh i Rende</option>
            <option id="AUTOMJETE" value="Per Kamping">Per Kamping</option>
            <option id="AUTOMJETE" value="Per Bujqesi">Per Bujqesi</option>
            <option id="AUTOMJETE" value="Makineri Per Uje">Makineri Per Uje</option>
            <option id="VENDBANIME" value="Shtepi">Shtepi</option>
            <option id="VENDBANIME" value="Garazhde">Garazhde</option>
            <option id="VENDBANIME" value="Apartamente">Apartamente</option>
            <option id="VENDBANIME" value="Dhoma">Dhoma</option>
            <option id="VENDBANIME" value="Vila">Vila</option>
            <option id="VENDBANIME" value="Toke">Toke</option>
            <option id="VENDBANIME" value="Objekte">Objekte</option>
            <option id="ELEKTRONIK" value="Celulare">Celulare</option>
            <option id="ELEKTRONIK" value="Pjese Per Celulare">Pjese Per Celulare</option>
            <option id="ELEKTRONIK" value="Servis Celularesh">Servis Celularesh</option>
            <option id="ELEKTRONIK" value="Telefona Fiks">Telefona Fiks</option>
            <option id="ELEKTRONIK" value="Kompjutere">Kompjutere</option>
            <option id="ELEKTRONIK" value="Pjese Per Kompjuter">Pjese Per Kompjuter</option>
            <option id="ELEKTRONIK" value="Paisje Audio">Paisje Audio</option>
            <option id="ELEKTRONIK" value="Televizore">Televizore</option>
            <option id="ELEKTRONIK" value="Pjese Per Televizore">Pjese Per Televizore</option>
            <option id="ELEKTRONIK" value="Film / Muzike">Film / Muzike</option>
            <option id="ELEKTRONIK" value="Konzolate Per Lojra">Konzolate Per Lojra</option>
            <option id="SPORT" value="Paisje Sportive">Paisje Sportive</option>
            <option id="SPORT" value="Instrumente">Instrumente</option>
            <option id="SPORT" value="Veshje/Kepuce">Veshje/Kepuce</option>
            <option id="SPORT" value="Aksesore/Ora">Aksesore/Ora</option>
            <option id="SPORT" value="Libra/Revista">Libra/Revista</option>
            <option id="SPORT" value="Artikuj/Koleksion">Artikuj/Koleksion</option>
            <option id="SPORT" value="Turizem dhe Evente">Turizem dhe Evente</option>
            <option id="BIZNES-DHE-PUNE" value="Ambjente Biznesi">Ambjente Biznesi</option>
            <option id="BIZNES-DHE-PUNE" value="Dorezim Biznesi">Dorezim Biznesi</option>
            <option id="BIZNES-DHE-PUNE" value="Makineri Dhe Inventare">Makineri Dhe Inventare</option>
            <option id="BIZNES-DHE-PUNE" value="Shitje me Shumice">Shitje me Shumice</option>
            <option id="BIZNES-DHE-PUNE" value="Kafshe ne Ferme">Kafshe ne Ferme</option>
            <option id="BIZNES-DHE-PUNE" value="Sherbime">Sherbime</option>
            <option id="BIZNES-DHE-PUNE" value="Pune">Pune</option>
            <option id="TE-TJERA" value="TE NDRYSHME">TE NDRYSHME</option>
        </select>

这是我的jQuery代码：

$(function() {
    $('#catname').change(function(){
        $('#' + $(this).val()).show();
    });
});

提前致谢 ：）

Answer 1

首先，您不能两次使用相同的ID。 您应该改用class或data- {something}属性。

您还应该在标签上使用for属性，以便将它们分配给它们所标签的控件。 并且您不应该在伪造的条目上标记下拉列表，它有一个<optgroup>标记。

顺便说一句，使用$（this）.val（）没有太大意义，因为this.value更简单，更原始。

<select class="form-control" name="catname" id="catname">
    <optgroup label="Zgjidh Kategorine">
        <option value="AUTOMJETE">AUTOMJETE</option>
        <option value="VENDBANIME">VENDBANIME</option>
        <!-- etc. etc. -->
    </optgroup>
</select>
(…)
<label for="subname">Zgjidh Nen-Kategorine</label>
<select name="subname" id="subname" class="form-control">
    <optgroup label="Zgjidh Nen-Kategorine">
        <option class="AUTOMJETE" value="Makina">Makina</option>
        <option class="AUTOMJETE" value="Pjese Kembimi">Pjese Kembimi</option>
        <option class="AUTOMJETE" value="Motocikleta">Motocikleta</option>
        <option class="VENDBANIME" value="Shtepi">Shtepi</option>
        <option class="VENDBANIME" value="Garazhde">Garazhde</option>
        <option class="VENDBANIME" value="Apartamente">Apartamente</option>
        <!-- etc. etc. -->
    </optgroup>
</select>
<script>
    $('#catname').change(function(){
        $('#subname option').hide();
        $('#subname .' + this.value).show();
    });
</script>

Answer 2

使用类而不是重复的ID。

 $(document).ready(function(){ $('#catname').change(function(){ $('.col-md-4 option').hide(); $('.' + $(this).val()).show(); }); }); 

 .col-md-4 option{display:none;} 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <select class="form-control" name="catname" id="catname"> <option value="">Zgjidh Kategorine</option> <option value="AUTOMJETE">AUTOMJETE</option> <option value="VENDBANIME">VENDBANIME</option> <option value="ELEKTRONIK">ELEKTRONIK</option> <option value="SPORT">SPORT</option> <option value="BIZNES-DHE-PUNE">BIZNES DHE PUNE</option> <option value="TE-TJERA">TE TJERA</option> </select> <div class="col-md-4" id="AUTOMJETE"> <div class="form-group"> <label>Zgjidh Nen-Kategorine</label> <select name="subname" class="form-control"> <option value="">Zgjidh Nen-Kategorine</option> <option class="AUTOMJETE" value="Makina">Makina</option> <option class="AUTOMJETE" value="Pjese Kembimi">Pjese Kembimi</option> <option class="AUTOMJETE" value="Motocikleta">Motocikleta</option> <option class="AUTOMJETE" value="Makineri Tonazh i Rende">Makineri Tonazh i Rende</option> <option class="AUTOMJETE" value="Per Kamping">Per Kamping</option> <option class="AUTOMJETE" value="Per Bujqesi">Per Bujqesi</option> <option class="AUTOMJETE" value="Makineri Per Uje">Makineri Per Uje</option> <option class="VENDBANIME" value="Shtepi">Shtepi</option> <option class="VENDBANIME" value="Garazhde">Garazhde</option> <option class="VENDBANIME" value="Apartamente">Apartamente</option> <option class="VENDBANIME" value="Dhoma">Dhoma</option> <option class="VENDBANIME" value="Vila">Vila</option> <option class="VENDBANIME" value="Toke">Toke</option> <option class="VENDBANIME" value="Objekte">Objekte</option> <option class="ELEKTRONIK" value="Celulare">Celulare</option> <option class="ELEKTRONIK" value="Pjese Per Celulare">Pjese Per Celulare</option> <option class="ELEKTRONIK" value="Servis Celularesh">Servis Celularesh</option> <option class="ELEKTRONIK" value="Telefona Fiks">Telefona Fiks</option> <option class="ELEKTRONIK" value="Kompjutere">Kompjutere</option> <option class="ELEKTRONIK" value="Pjese Per Kompjuter">Pjese Per Kompjuter</option> <option class="ELEKTRONIK" value="Paisje Audio">Paisje Audio</option> <option class="ELEKTRONIK" value="Televizore">Televizore</option> <option class="ELEKTRONIK" value="Pjese Per Televizore">Pjese Per Televizore</option> <option class="ELEKTRONIK" value="Film / Muzike">Film / Muzike</option> <option class="ELEKTRONIK" value="Konzolate Per Lojra">Konzolate Per Lojra</option> <option class="SPORT" value="Paisje Sportive">Paisje Sportive</option> <option class="SPORT" value="Instrumente">Instrumente</option> <option class="SPORT" value="Veshje/Kepuce">Veshje/Kepuce</option> <option class="SPORT" value="Aksesore/Ora">Aksesore/Ora</option> <option class="SPORT" value="Libra/Revista">Libra/Revista</option> <option class="SPORT" value="Artikuj/Koleksion">Artikuj/Koleksion</option> <option class="SPORT" value="Turizem dhe Evente">Turizem dhe Evente</option> <option class="BIZNES-DHE-PUNE" value="Ambjente Biznesi">Ambjente Biznesi</option> <option class="BIZNES-DHE-PUNE" value="Dorezim Biznesi">Dorezim Biznesi</option> <option class="BIZNES-DHE-PUNE" value="Makineri Dhe Inventare">Makineri Dhe Inventare</option> <option class="BIZNES-DHE-PUNE" value="Shitje me Shumice">Shitje me Shumice</option> <option class="BIZNES-DHE-PUNE" value="Kafshe ne Ferme">Kafshe ne Ferme</option> <option class="BIZNES-DHE-PUNE" value="Sherbime">Sherbime</option> <option class="BIZNES-DHE-PUNE" value="Pune">Pune</option> <option class="TE-TJERA" value="TE NDRYSHME">TE NDRYSHME</option> </select> </div> </div>