Выберите опцию по id, а не по значению

Question

Так что я должен быть искренним, я действительно новичок в JQuery. Я взял сценарий, который позволяет A Select Html изменять значение другого меню «Выбрать», связывая два выбранных меню по их значениям. Например, если я выбираю В первом Выберите «Логистик», а не во втором. Выберите все значение с именем value = «Logistique». Но мне действительно нужно связать их по идентификатору, а не по значениям. Возможно, кто-нибудь откроет мне глаза?

Я надеюсь, побывав конкретные

Catégorie de Soin :<select name="Catsoin" id="Catsoin"><br /> 

     <option value="0">---Select---</option><br /> 
      <option id="1" value="Logistique" >Logistique</option><br /> 
      <option value="Traitement" id="2">Traitement</option><br /> 
      <option value="SoinsBase" id="3"> Soins de Base</option> <br /> 
      <option value="Surveilrap" id="4">Surveillance rapprochée</option><br /> 
      <option value="Transmi" id="5">Transmission</option><br /> 
      <option value="Evenement" id="6">Evènements Imprévisibles</option><br /> 
      <option value="Prelevement" id="7">Prélèvements</option><br /> 
      <option value="TechInfi" id="8">Techniques Infirmière</option><br /> 
      <option value="RemplUS" id="9">Remplacement dans une US</option><br /> 
     </select><br /> 

<script> 
    $("#Catsoin").change(function() { 
     if($(this).data('options') == undefined) 
     { 
      /*Taking an array of all options-2 and kind of embedding it on the Catsoin*/ 
      $(this).data('options',$('#Soin option').clone());<br /> 
     } 

     var id = $(this).val(); 
     var options = $(this).data('options').filter('[ val =' + id + ']'); 

     $('#Soin').html(options); 
    }); 
</script> 

Soin :<select name="Soin" id="Soin"> 
    <option value="Logistique"id="1">Passage</option> 
    <option id="1" value="Logistique" >Présence dans une Us</option> 
    <option value="Logistique" id="1">Rangement</option> 
    <option value="Logistique" id="1">Medicarte</option> 
    <option value="Logistique" id="1">Cherche du Matériel</option> 
    <option value="Logistique" id="1">Transfert d'un patient</option> 
    <option value="Logistique" id="1">Autre</option> 
    <option value="Traitement" id="2">Préparation IV</option> 
    <option value="Traitement" id="2">Préparation POS</option> 
    <option value="Traitement" id="2">Administration IV</option> 
    <option value="Traitement" id="2">Administration POS</option> 
    <option value="Traitement" id="2">Injection IM/SC</option> 
    <option value="Traitement" id="2" >Transfusion</option> 
    <option value="Traitement" id="2">Aérosolthérapie</option> 
    <option value="Traitement" id="2">Oxygénothérapie</option> 
    <option value="Traitement" id="2">Prise en charge du R</option> 
    <option value="Traitement" id="2">Autre</option> 
    <option value="SoinsBase" id="3">Toilette</option> 
    <option value="SoinsBase" id="3">Elimination</option> 
    <option value="SoinsBase" id="3">Alimentation</option> 
    <option value="SoinsBase" id="3">Soin de confort</option> 
    <option value="SoinsBase" id="3">Frictions</option> 
    <option value="SoinsBase" id="3">Autre</option> 
    <option value="Surveilrap" id="4">Post-Op</option> 
    <option value="Surveilrap" id="4">Urgences</option> 
    <option value="Surveilrap" id="4">Paramètres</option> 
    <option value="Surveilrap" id="4">Monitoring</option> 
    <option value="Surveilrap" id="4">Patient Critique</option> 
    <option value="Surveilrap" id="4">Tour Infirmier Complet</option> 
    <option value="Surveilrap" id="4">Autre</option> 
    /*.....there are other select option until id="9"*/ 
</select> 

Answer 1

Как указано в комментариях, ID должен быть уникальным. Вместо этого следует использовать вместо него class. Вот рабочий пример:

$("#catsoin").change(function() { 
 
    var cat = $(this).val(); // this is the selected value 
 

 
    $("#soin option:not(." + cat + ")").hide(); // you hide every option that don't have your selected value as a class 
 
    $("#soin option." + cat).show(); // you only show selected options 
 
    $("#soin").val(""); //reset the previously selected value 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<select id="catsoin"> <!-- the first selector --> 
 
    <option value=""></option> 
 
    <option value="Logistique">Logistique</option> 
 
    <option value="SoinsBase">Soins de Base</option> 
 
</select> 
 

 
<select id="soin"> <!-- the second one, pseudo-dynamic --> 
 
    <option value=""></option> 
 
    <option value="Rangement" class="Logistique">Rangement</option> 
 
    <option value="Medicarte" class="Logistique">Medicarte</option> 
 
    <option value="Toilette" class="SoinsBase">Toilette</option> 
 
</select> 
 

 
    <script type="text/javascript"> 
 
     
 
    </script>

Answer 2

Вы не можете дать идентификатор атрибута в том, что много элементов

идентификатор должен быть уникальным для каждого элемента

Edit: вы можете использовать атрибут класса