javascript - 按 id 而不是按值选择选项

Question

所以我必须说实话，我真的是 Jquery 的新手。我采用了一个脚本，允许 A Select Html 更改另一个选择菜单的值，通过其值链接两个选定的菜单。例如，如果我选择在第一个选择“Logistique”中，则在第二个选择中选择所有名为 value="Logistique"的值。但我确实需要通过 ID 而不是通过值来链接它们。请问有人可以睁开我的眼睛吗？

我希望具体

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>