jquery僅當選擇{幫助}時才顯示ID選項

我只想按ID顯示所選類別的子類別。
我試着用分開的select，但用同名的名字是很長的路，因爲它需要檢查每個名字空...
也許我錯了......我需要一些關於這個的想法。
jquery僅當選擇{幫助}時才顯示ID選項

這是我的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(); 
    }); 
});

感謝提前:)

來源

2017-02-26 Bimi Gjika

你必須噸重複的ID其無效的！ –

@ibrahimmahrir任何想法如何解決？ –

你是怎麼得到這個HTML的？你使用PHP生成它嗎？或者你自己寫了嗎？ –

使用class而不是重複的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>

來源

2017-02-26 23:23:26

非常有用！問題解決了。非常感謝:) –

你歡迎我的兄弟。 –

首先，你不能使用相同的ID兩次。您應該使用類別或data-{something}屬性代替。

對於標籤，您還應該使用作爲屬性，以便將它們分配給它們標籤的控件。而且你不應該使用虛假條目來標記下拉列表，因此有<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>

來源

2017-02-26 23:22:04 jaboja

非常感謝Jakub。你很棒！ –

jquery僅當選擇{幫助}時才顯示ID選項

回答

相關問題