web-dev-qa-db-fra.com

Comment supprimer toutes les options d'un menu déroulant à l'aide de jQuery/JavaScript

J'ai un menu déroulant comme vu ci-dessous:

<select id="models" onchange="removeElements()">
            <option id = "remove" value="0">R8</option>
            <option id = "remove" value="1">Quattro</option>
            <option id = "remove" value="2">A6 hatchback</option>
</select>

Comment pourrais-je créer le script removeElements() qui supprimerait toutes les options de la sélection?

javascriptjqueryhtmlselect
17
TotalNewbie

Vous n'avez pas indiqué sur quel événement.Vous n'avez qu'à utiliser ci-dessous sur votre écouteur d'événement. Ou dans le chargement de votre page

$('#models').empty()

Puis repeupler

$.getJSON('@Url.Action("YourAction","YourController")',function(data){
 var dropdown=$('#models');
dropdown.empty();  
$.each(data, function (index, item) {
    dropdown.append(
        $('<option>', {
            value: item.valueField,
            text: item.DisplayField
        }, '</option>'))
      }
     )});
56
Mir Gulam Sarwar

Vous pouvez soit utiliser .remove () sur les éléments d’option:

.remove (): supprime le jeu d'éléments correspondants du DOM.

 $('#models option').remove(); or $('#models').remove('option');

ou utilisez .empty () on select:

.empty (): supprime tous les nœuds enfants de l'ensemble des éléments correspondants du DOM.

 $('#models').empty();

cependant, pour repeupler les options supprimées, vous devez la stocker pendant la suppression.

Vous pouvez également obtenir la même chose en utilisant show/hide:

$("#models option").hide();

et plus tard pour leur montrer:

$("#models option").show();
11
Milind Anantwar

Au cas où .empty () ne fonctionne pas pour vous, ce qui est pour moi

function SetDropDownToEmpty() 
{           
$('#dropdown').find('option').remove().end().append('<option value="0"></option>');
$("#dropdown").trigger("liszt:updated");          
}

$(document).ready(
SetDropDownToEmpty() ;
)
0
Jesse
function removeElements(){
  $('#models').html('');
}
0
Deepak Tiwari

Essaye ça

function removeElements(){
    $('#models').html("");
}
0
Dhambha

Toute personne utilisant JavaScript (par opposition à JQuery) pourrait essayer cette solution, où "modèles" est l'ID du champ de sélection contenant la liste:

var DDlist = document.getElementById("models");
while(DDlist.length>0){DDlist.remove(0);}
0
user3506285