web-dev-qa-db-fra.com

activer ou désactiver l'option de sélectionner

J'essaie de rendre une option sélectionnable OR non sélectionnable, selon qu'ils ont ou non choisi une autre option. Par exemple, s'il existe des options 1 à 6 et qu'ils n'ont PAS choisi l'option 1 dans leur première zone de sélection, l'option 6 ne peut PAS être choisie dans cette zone de sélection SAME et toute autre dans le formulaire.

J'ai regardé autour de moi, mais tout consiste à cliquer sur un bouton pour y parvenir.

C'est le code que j'ai (j'ai aussi essayé onclick)

   <script type="text/javascript">
      function makeDisable(){
      var x=document.getElementById("mySelect2");
      x.disabled=true
      }
     function makeEnable(){
         var x=document.getElementById("mySelect2");
          x.disabled=false
     }</script>
     <form>
        <select class="mySelect" id="mySelect">
        <option onchange="makeEnable()" value="Enable list">Apple</option>
        <option onchange="makeDisable()" value="Disable list">Banana</option>
        <option id="mySelect2" disabled="true">Orange</option>
    </select>
    </form>
javascripthtml-select
8
M.Sidim

Les éléments optionnels n'ont pas d'événement "onchange", mais les éléments sélectionnés en ont.

J'ai rapidement écrit un extrait de code ci-dessous. Vous pouvez ajouter d'autres éléments sélectionnés. Lorsque vous choisissez une option dans l'un de ces éléments de sélection, vous ne devez pas choisir d'options du même index dans d'autres éléments de sélection.

<script type="text/javascript">
  function toggleDisability(selectElement){
   //Getting all select elements
   var arraySelects = document.getElementsByClassName('mySelect');
   //Getting selected index
   var selectedOption = selectElement.selectedIndex;
   //Disabling options at same index in other select elements
   for(var i=0; i<arraySelects.length; i++) {
    if(arraySelects[i] == selectElement)
     continue; //Passing the selected Select Element

    arraySelects[i].options[selectedOption].disabled = true;
   }
  }
 </script>
 <form>
 <select onchange="toggleDisability(this);" class="mySelect" id="mySelect1">
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
 </select>
 <select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
    <option>Hamburger</option>
    <option>Pizza</option>
    <option>Cola</option>
</select>
</form>
7
Aycan Yaşıt
<script type="text/javascript">
  function toggleDisability(selectElement){
   //Getting all select elements
   var arraySelects = document.getElementsByClassName('mySelect');
   //Getting selected index
   var selectedOption = selectElement.selectedIndex;
   //Disabling options at same index in other select elements
   for(var i=0; i<selectElement.length; i++) {
    if(arraySelects[i] == selectedOption)
     continue; //Passing the selected Select Element

    arraySelects[i].options[selectedOption].disabled = true;
   }
  }
 </script>
 <form>
 <select onchange="toggleDisability(this);" class="mySelect" id="mySelect1">
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
 </select>
 <select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
    <option>Hamburger</option>
    <option>Pizza</option>
    <option>Cola</option>
</select>
</form>
0
Le Thanh Duong