Несколько Выбрать вариант с тем же именем

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

Спасибо всем

Я уже решил это, используя dom id для установки названия инструмента или отключения

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

Answer 2

грубый, короткий ответ:

1) Поместите свойство данных в параметры категории:

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

2) Получите атрибут данных выбранной категории:

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

3) скрыть все инструменты

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

4) показать инструмент из выбранной категории

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