Javascript jquery仅在选择{help}时显示id选项

我只想按ID显示所选类别的子类别。
我尝试了使用separated

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>

---

提前感谢：）

首先，您不能使用同一id两次。您应该使用类或数据{something}属性

您还应该对标签使用for属性，以便将标签指定给它们所标记的控件。您不应该用虚假条目标记下拉列表，它有

标签

顺便说一句，使用$（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>

自动喷气发动机
文巴尼
(…)
Zgjidh Nen Kategorine
马基纳
普杰斯·凯比米
莫托西克列塔
什特皮
加拉什德
公寓
$（'#catname'）。更改（函数（）{
$（“#子名称选项”）.hide（）；
$（“#子名称”。+this.value）.show（）；
});

首先，您不能使用同一id两次。您应该使用类或数据{something}属性

您还应该对标签使用for属性，以便将标签指定给它们所标记的控件。您不应该用虚假条目标记下拉列表，它有

标签

顺便说一句，使用$（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>

自动喷气发动机
文巴尼
(…)
Zgjidh Nen Kategorine
马基纳
普杰斯·凯比米
莫托西克列塔
什特皮
加拉什德
公寓
$（'#catname'）。更改（函数（）{
$（“#子名称选项”）.hide（）；
$（“#子名称”。+this.value）.show（）；
});

使用类而不是重复的ID

$（文档）.ready（函数（）{
$（'#catname'）。更改（函数（）{
$（'.col-md-4选项'）.hide（）；
$（'.+$（this.val（））.show（）；
});
});
.col-md-4选项{显示：无；}

Zgjidh Kategorine
自动喷气发动机
文巴尼
ELEKTRONIK
运动
比兹内斯德赫普纳酒店
特杰拉酒店
Zgjidh Nen Kategorine
Zgjidh Nen Kategorine
马基纳
普杰斯·凯比米
莫托西克列塔
Makineri Tonazh i Rende
佩坎平
佩尔布吉西
马基里佩鲁杰
什特皮
加拉什德
公寓
多马
维拉
托克
对象
塞鲁拉雷
普杰斯·佩尔·塞卢拉雷
塞鲁拉雷斯酒店
菲克斯电视台
康普朱特雷酒店
每个康普朱特酒店
Paisje音频
电视剧
电视剧
电影/木偶
康唑酯/乐杰拉
派斯杰运动酒店
仪器
Veshje/Kepuce
阿克塞索/奥拉
天秤座/雷维斯塔
Artikuj/Koleksion
Turizem dhe事件
安布杰特·比兹内西
多雷齐姆·比兹内西
马基内里·杜瓦雷
Shitje me Shu老鼠
山楂
舍比姆
浦那
恩德里希姆酒店
使用类而不是重复的ID


$（文档）.ready（函数（）{
$（'#catname'）。更改（函数（）{
$（'.col-md-4选项'）.hide（）；
$（'.+$（this.val（））.show（）；
});
});
.col-md-4选项{显示：无；}

Zgjidh Kategorine
自动喷气发动机
文巴尼
ELEKTRONIK
运动
比兹内斯德赫普纳酒店
特杰拉酒店
Zgjidh Nen Kategorine
Zgjidh Nen Kategorine
马基纳
普杰斯·凯比米
莫托西克列塔
Makineri Tonazh i Rende
佩坎平
佩尔布吉西
马基里佩鲁杰
什特皮
加拉什德
公寓
多马
维拉
托克
对象
塞鲁拉雷
普杰斯·佩尔·塞卢拉雷
塞鲁拉雷斯酒店
菲克斯电视台
康普朱特雷酒店
每个康普朱特酒店
Paisje音频
电视剧
电视剧
电影/木偶
康唑酯/乐杰拉
派斯杰运动酒店
仪器
Veshje/Kepuce
阿克塞索/奥拉
天秤座/雷维斯塔
Artikuj/Koleksion
Turizem dhe事件
安布杰特·比兹内西
多雷齐姆·比兹内西
马基内里·杜瓦雷
Shitje me Shu老鼠
山楂
舍比姆
浦那
恩德里希姆酒店
您有大量无效的重复ID@ibrahimmahrir知道怎么解决吗？你是怎么得到HTML的？你是用PHP生成的吗？还是你自己写的？@ibrahimmahrir我写的是测试…你最好把ID属性改成class<代码>您有大量无效的重复ID@ibrahimmahrir知道怎么解决吗？你是怎么得到HTML的？你是用PHP生成的吗？还是你自己写的？@ibrahimmahrir我写的是测试…你最好把ID属性改成class<代码>非常感谢Jakub。你太棒了！非常感谢，雅库布。你太棒了！