web-dev-qa-db-fra.com

Comment puis-je désactiver une <option> dans un <select> en fonction de sa valeur en JavaScript?

J'ai un <select> avec un certain nombre de <option>s. Chacun a une valeur unique. Je dois désactiver un <option> avec une valeur définie donnée (pas innerhtml).

Quelqu'un a une idée de comment?

javascripthtmlselect
41
David

Javascript pur

Avec du Javascript pur, vous devrez parcourir chaque option et vérifier la valeur de celle-ci individuellement.

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  (op[i].value.toLowerCase() == "stackoverflow") 
    ? op[i].disabled = true 
    : op[i].disabled = false ;
}

Sans activer les éléments non ciblés:

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  if (op[i].value.toLowerCase() == "stackoverflow") {
    op[i].disabled = true;
  }
}

jQuery

Avec jQuery, vous pouvez le faire avec une seule ligne:

$("option[value='stackoverflow']")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

Sans activer les éléments non ciblés:

$("option[value='stackoverflow']").attr("disabled", "disabled");

Notez que ceci n'est pas insensible à la casse. "StackOverflow" ne sera pas égal à "stackoverflow". Pour obtenir une correspondance insensible à la casse, vous devez parcourir chacun d'eux, convertir la valeur en minuscules, puis vérifier cela:

$("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
  }
});

Sans activer les éléments non ciblés:

$("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled");
  }
});
75
Sampson

Définissez un id pour l'option, puis utilisez l'élément get par id et désactivez-le lorsque la valeur x a été sélectionnée.

exemple

<body>
      <select class="pull-right text-muted small" 
                 name="driveCapacity" id=driveCapacity onchange="checkRPM()">
      <option value="4000.0" id="4000">4TB</option>
      <option value="900.0" id="900">900GB</option>
      <option value="300.0" id ="300">300GB</option>
    </select>
    </body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){         
        document.getElementById("driveCapacity").value = "4000.0";
        document.getElementById("4000").disabled = false;           
    }else{          
        document.getElementById("4000").disabled = true;            
    }    
</script>
3
Patricio Zambrano
var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');

function select_disable_options(selectid,vals){
  var selected = false ;
  $('#'+selectid+' option').removeAttr('selected');
  $('#'+selectid+' option').each(function(i,elem){
       var elid = parseInt($(elem).attr('value'));
       if(vals){
           if(vals.indexOf(elid) != -1){
               $(elem).removeAttr('disabled');
               if(selected == false){
                   $(elem).attr('selected','selected');
                   selected = true ; 
               }
           }else{
               $(elem).attr('disabled','disabled'); 
           }
       }else{
            $(elem).removeAttr('disabled');
       }
  });   
}

Ici avec JQ .. si quelqu'un le recherche

1
Айдън Бейтулов

Je voudrais vous donner aussi l’idée de désactiver un <option> avec une valeur définie donnée (not innerhtml). Je le recommande avec jQuery pour obtenir le moyen le plus simple. Voir mon échantillon ci-dessous.

[~ # ~] html [~ # ~]

Status:  
<div id="option">
   <select class="status">
      <option value="hand" selected>Hand</option>
      <option value="simple">Typed</option>
      <option value="printed">Printed</option>
   </select>
</div>

Javascript

L'idée ici est de savoir comment désactiver l'option Printed lorsque le courant Status est Hand

var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;

Vous pouvez voir comment cela fonctionne ici:

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

0
Chetabahana

Pour une raison quelconque, les autres réponses sont inutilement complexes, il est facile de le faire en une seule ligne en JavaScript pur:

Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;

ou

selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').disabled = true;

Les performances dépendent du nombre d'options (plus il y a d'options, plus la première est lente) et si vous pouvez omettre échappement (l'appel replace) de la seconde. Le premier utilise également Array.find et les fonctions flèches qui ne sont pas disponibles dans IE11.

0
user