web-dev-qa-db-fra.com

Supprimer des valeurs de la liste de sélection en fonction de la condition

J'ai ce qui suit dans la page

<select name="val" size="1" >
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select>

Je voudrais supprimer certaines valeurs de ma sélection si certaines conditions sont remplies.

Par exemple

if(frm.product.value=="F"){
  // remove Apple and Cars from the select list
}

Comment puis-je faire cela en utilisant javascript

javascripthtmlvalidation
19
Jåcob

Donnez un identifiant pour l'objet sélectionné comme ceci:

<select id="mySelect" name="val" size="1" >
    <option value="A">Apple</option>
    <option value="C">Cars</option>
    <option value="H">Honda</option>
    <option value="F">Fiat</option>
    <option value="I">Indigo</option>                    
</select>

Vous pouvez le faire en JavaScript pur:

var selectobject = document.getElementById("mySelect");
for (var i=0; i<selectobject.length; i++) {
    if (selectobject.options[i].value == 'A')
        selectobject.remove(i);
}

Mais - comme les autres réponses le suggèrent - il est beaucoup plus facile d'utiliser jQuery ou une autre bibliothèque JS.

31
Andrew

Vérifiez la solution JQuery ici

$("#selectBox option[value='option1']").remove();
9
Dumisani

avec javascript pur

var condition = true; // your condition
if(condition) {
    var theSelect = document.getElementById('val');
    var options = theSelect.getElementsByTagName('OPTION');
    for(var i=0; i<options.length; i++) {
        if(options[i].innerHTML == 'Apple' || options[i].innerHTML == 'Cars') {
            theSelect.removeChild(options[i]);
            i--; // options have now less element, then decrease i
        }
    }
}

non testé avec IE (si quelqu'un peut le confirmer ...)

8
Luca Rainone

Comme certains l'ont mentionné, la longueur de l'élément de sélection diminue lors de la suppression d'une option. Si vous souhaitez simplement supprimer une option, ce n'est pas un problème, mais si vous avez l'intention de supprimer plusieurs options, vous pourriez rencontrer des problèmes. Certains ont suggéré de diminuer l'index manuellement lors de la suppression d'une option. À mon avis, la diminution manuelle d'un index dans une boucle for n'est pas une bonne idée. C'est pourquoi je suggérerais une boucle for légèrement différente où nous parcourons toutes les options par derrière.

var selectElement = document.getElementById("selectId");

for (var i = selectElement.length - 1; i >= 0; i--){
  if (someCondition) {
    selectElement.remove(i);
  }
}

Si vous souhaitez supprimer toutes les options, vous pouvez faire quelque chose comme ça.

var selectElement = document.getElementById("selectId");

while (selectElement.length > 0) {
  selectElement.remove(0);
}
3
Jason Saruulo

L'index I changera dès qu'il supprimera le 1er élément. Ce code supprimera les valeurs 52-140 de la zone de liste déroulante des canaux wifi

obj = document.getElementById("id");
if (obj)
{
        var l = obj.length;
        for (var i=0; i < l; i++)
        {
            var channel = obj.options[i].value;

            if ( channel >= 52 &&  channel <= 140 )
            {
                obj.remove(i);
                i--;//after remove the length will decrease by 1 
            }
        }
    }
2
Amit Shah

Si vous utilisez JQuery, cela se passe comme suit:

Donnez une pièce d'identité à votre SELECT

<select name="val" size="1" id="val">
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select>

$("#val option[value='A'],#val option[value='C']").remove();
2
Filipe Melo

Alternativement, vous pouvez également accomplir cela avec getElementsByName

<select id="mySelect" name="val" size="1" >
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select>

Ainsi, en faisant correspondre la valeur de l'option "C", nous pourrions supprimer les voitures de la liste.

var selectobject = document.getElementsByName('val')[0];
for (var i=0; i<selectobject.length; i++){
if (selectobject.options[i].value == 'C' )
    selectobject.remove(i);
  }
1
user3724032

Vous devez aller à son parent et le supprimer de là en javascript.

"Javascript ne permet pas à un élément de se suicider, mais il permet l'infanticide" .. :)

essaye ça,

 var element=document.getElementsByName(val))
 element.parentNode.removeChild(element.options[0]); // to remove first option
1
bipen
document.getElementById(this).innerHTML = '';

Mettez-le dans votre if-case. Ce qu'il fait est simplement de vérifier l'objet actuel dans le document et de le remplacer par rien. Vous aurez également à parcourir la liste en premier, je suppose que vous le faites déjà puisque vous l'avez si.

1
Ms01

Vous pouvez utiliser:

if ( frm.product.value=="F" ){
    var $select_box = $('[name=val]');
    $select_box.find('[value=A],[value=C]').remove(); 
}

pdate: Si vous modifiez un peu votre boîte de sélection

<select name="val" size="1" >
  <option id="A" value="A">Apple</option>
  <option id="C" value="C">Cars</option>
  <option id="H" value="H">Honda</option>
  <option id="F" value="F">Fiat</option>
  <option id="I" value="I">Indigo</option>                    
</select>

la solution non jQuery serait la suivante

if ( frm.product.value=="F" ){
    var elem = document.getElementById('A');
    elem.parentNode.removeChild(elem);
    var elem = document.getElementById('C');
    elem.parentNode.removeChild(elem);
}
1
Thariama

Cela devrait le faire

document.getElementsByName("val")[0].remove(0);
document.getElementsByName("val")[0].remove(0);

Vérifiez le violon ici

1
Jacob George
if(frm.product.value=="F"){
    var select = document.getElementsByName('val')[0];
    select.remove(0);
    select.remove(1);
}
1
karaxuna

Pour effacer toutes les options en Important en POUR: supprimer (0) - Important: 0

var select = document.getElementById("element_select");
var length = select.length;
for (i = 0; i < length; i++) {
     select.remove(0);
 //  or
 //  select.options[0] = null;
}
0
Alexander Rogan