多个具有相同名称的选择选项

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>

问题是我在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';