按ID選擇選項而不是按值

所以我必須真誠，我真的是Jquery的新手。我已經採取了一個腳本，允許選擇Html改變另一個選擇菜單的值，通過它們的值鏈接兩個選定的菜單。例如，如果我選擇在第一個選擇「Logistique」比第二個選擇所有值名爲value =「Logistique」出現。但我真的需要通過Id鏈接它們而不是通過Values。請問有人可以睜開我的眼睛嗎？按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>

來源

2014-09-23 Carnangel

在頁面上'id'着重複！ – mithunsatheesh 2014-09-23 13:12:58

你不能有多個同名的ID！ – 2014-09-23 13:13:22

HTML中的_ID必須是唯一的.__您需要重新考慮您的策略。 – Satpal 2014-09-23 13:14:36

如評論中所述，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>

來源

2014-09-23 13:28:12 pistou

編輯我的評論：謝謝安德魯這是真正的解決方案！我只有11點的聲望，但是當我在15點時我會回到這裏來註冊你;）再次感謝:) – Carnangel 2014-09-23 13:39:03

你不能給id屬性來那麼多元素

ID必須是唯一的每個元素

編輯：你可以使用類屬性

來源

2014-09-23 13:14:46 Kenny

即使它是非常真實的，這是一個評論，但肯定不是一個問題的答案 – pistou 2014-09-23 13:15:43

其實我沒有那麼多的聲譽來評論任何問題 – Kenny 2014-09-23 13:16:43

按ID選擇選項而不是按值

回答

相關問題