多個具有相同名稱的選擇選項

Question

我有問題，我嘗試了幾次嘗試，但無濟於事。

我有這個選擇名稱類別

 $("#category").change(function() { if ($(this).val() == "Strings") { $("#instrument").show(); $(".Label").show(); $("#instrument2").hide(); $("#instrument3").hide(); $("#instrument4").hide(); } else if ($(this).val() == "Percussion") { $("#instrument2").show(); $(".Label").show(); $("#instrument").hide(); $("#instrument3").hide(); $("#instrument4").hide(); } else if ($(this).val() == "Keyboard") { $("#instrument3").show(); $(".Label").show(); $("#instrument").hide(); $("#instrument2").hide(); $("#instrument4").hide(); } else if ($(this).val() == "Woodwind") { $("#instrument4").show(); $(".Label").show(); $("#instrument").hide(); $("#instrument3").hide(); $("#instrument2").hide(); } else { $(".Label").hide(); $("#instrument").hide(); $("#instrument2").hide(); $("#instrument3").hide(); $("#instrument4").hide(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="category" class="form-control" rows="1" name="category" required> <option value="Strings">Strings</option> <option value="Percussion">Percussion</option> <option value="Keyboard">Keyboard</option> <option value="Woodwind">Woodwind</option> </select> And this select name instrument <br> <select id="instrument" class="form-control" rows="1" name="instrument" required> <option value="Guitar">Guitar</option> <option value="Violin">Violin</option> <option value="Cello">Cello</option> </select> <select id="instrument2" class="form-control" rows="1" name="instrument" required> <option value="Drum">Drum</option> <option value="Xylophone">Xylophone</option> </select> <select id="instrument3" class="form-control" rows="1" name="instrument" required> <option value="Harpsichord">Harpsichord</option> <option value="Piano">Piano</option> </select> <select id="instrument4" class="form-control" rows="1" name="instrument" required> <option value="Flutes">Flutes</option> <option value="Saxophone">Saxophone</option> </select> 

問題是無論我在選擇選項上選擇什么，它都會給我一個'Flutes'值，而且我還有一個CSS來隱藏未按類別選擇的那些，並顯示有關類別更改的工具。

Answer 1

粗略的簡短答案：

1）在類別選項上放置一個數據屬性：

<option data-instrument='instrument2'>Percussion</option>

2）獲取所選類別選項的數據屬性：

var selectedInstrument = $('#category option:selected').data('instrument');

3）隱藏所有樂器

$('select[name=instrument]').hide();

4）顯示所選類別的儀器

$('#' + selectedInstrument).show();

Answer 2

謝謝大家

我已經使用dom id設置名稱工具或禁用了它來解決

document.getElementById("sub_title8").name='disabled';
document.getElementById("sub_title8").name='instrument';