按ID而不是按值选择选项

So I have to be sincere, I'am really Newbie in Jquery. I've taken a script that allows A Select Html to change the value of another Select menu, linking the two selected menu by their Values. For example If I choose In the first Select "Logistique" than in the second Select all the value named value="Logistique" appear. But I really need to link them By Id and not by Values. Please may someone open my eyes?

所以我必须要真诚,我真的是Jquery的新人。我采用了一个脚本,允许A Select Html更改另一个Select菜单的值,将两个选定菜单的值链接起来。例如,如果我选择在第一个选择“Logistique”而不是第二个选择所有名为value =“Logistique”的值出现。但我真的需要通过Id而不是值来链接它们。请有人睁开我的眼睛吗?

I hope having been specific

我希望具体

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>

2 个解决方案

#1

As said in the comments, id must be unique. You should consider using class instead. Here is a working example :

如评论中所述,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>

#2

You can't give id attribute to that much elements

你不能给那么多元素赋予id属性

id must be unique to each element

id必须对每个元素都是唯一的

Edit : you can use class attribute

编辑:您可以使用class属性

#1