按ID而不是按值選擇選項

Question

所以我必須要真誠，我真的是Jquery的新手。 我采用了一個腳本，該腳本允許A Select Html更改另一個Select菜單的值，並通過兩個Value鏈接兩個選定的菜單。 例如，如果我在第一個選擇“ 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> 

Answer 2

你不能給那么多元素id屬性

id對於每個元素必須唯一

編輯：可以使用class屬性