2014-04-10 10 views
14

Ciao a tutti ho un menu a discesa, come si vede qui sotto:Come rimuovere tutte le opzioni da un menu a discesa utilizzando jQuery/JS

<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> 

come faccio a creare le removeElements script() che rimuovere tutte le opzioni all'interno del selezionare?

+4

Capisci che la sezione id ha lo scopo di avere un nome univoco, non come i tag delle opzioni. – gsamaras

+0

Ripetuto - http://stackoverflow.com/questions/3364493/how-do-i-clear-all-options-in-a-dropdown-box – Christian

+0

JS normale: 'document.getElementById ('models'). Length = 0' fa per me. Se hai già un riferimento alla selezione, quindi 'select.length = 0' (vedi [HTML5 sezione 4.10.7] (http://www.w3.org/html/wg/drafts/html/master/forms. html # dom-select-length)). – RobG

risposta

45

Non hai detto su cui event.Just utilizzare sotto il vostro evento listener.Or nel caricamento della pagina

$('#models').empty() 

Poi per ripopolare

$.getJSON('@Url.Action("YourUrl")',function(data){ 
var dropdown=$('#models'); 
dropdown.empty(); 
$.each(data, function (index, item) { 
    dropdown.append(
     $('<option>', { 
      value: item.valueField, 
      text: item.DisplayField 
     }, '</option>')) 
     } 
    )}); 
+0

posso quindi ripopolare i modelli selezionare dopo aver eseguito questo metodo? – TotalNewbie

+0

ho bisogno di svuotare il contenuto in materia di cambiamenti e ripopolare la discesa – TotalNewbie

+0

non dopo aver tacchetta la casella di selezione mi propongo di fare una chiamata AJAX e quindi ripopolare la discesa – TotalNewbie

11

È possibile utilizzare .remove() in opzione elementi:

.Rimuovere(): rimuovere l'insieme di elementi corrispondenti dal DOM.

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

o utilizzare .empty() su Seleziona:

.empty(): Rimuovere tutti i nodi figlio del set di elementi abbinati dal DOM.

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

opzioni comunque a ripopolare cancellati, è necessario memorizzare l'opzione durante l'eliminazione.

È inoltre possibile ottenere lo stesso mostra/nascondi utilizzando:

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

e successivamente per mostrare loro:

$("#models option").show(); 
+0

mostra/nascondi le opzioni selezionate non funziona in IE – black666

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

Prova questa

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

Nel caso in cui .empty() non funziona per te, che è per me

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

$(document).ready(
SetDropDownToEmpty() ; 
) 
Problemi correlati