Come si rimuovono tutte le opzioni di una casella di selezione e quindi si aggiunge un'opzione e la si seleziona con jQuery?

https://stackoverflow.com/questions/47824

09-06-2019
|

Domanda

Utilizzando core jQuery, come si rimuovono tutte le opzioni di una casella di selezione, quindi si aggiunge un'opzione e la si seleziona?

La mia casella di selezione è la seguente.

<Select id="mySelect" size="9" </Select>

MODIFICARE:Il codice seguente è stato utile per il concatenamento.Tuttavia (in Internet Explorer) .val('whatever') non ha selezionato l'opzione che è stata aggiunta.(Ho usato lo stesso "valore" in entrambi .append E .val.)

$('#mySelect').find('option').remove().end().append('<option value="whatever">text</option>').val('whatever');

MODIFICARE:Cercando di farlo imitare questo codice, utilizzo il seguente codice ogni volta che la pagina/modulo viene reimpostato.Questa casella di selezione è popolata da una serie di pulsanti di opzione. .focus() era più vicino, ma l'opzione non sembrava selezionata come con .selected= "true".Non c'è niente di sbagliato nel mio codice esistente: sto solo cercando di imparare jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

MODIFICARE:la risposta selezionata era vicina a ciò di cui avevo bisogno.Questo ha funzionato per me:

$('#mySelect').children().remove().end().append('<option selected value="whatever">text</option>') ;

Ma entrambe le risposte mi hanno portato alla mia soluzione finale..

Soluzione

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

Altri suggerimenti

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

perché non usare semplicemente Javascript?

document.getElementById("selectID").options.length = 0;

Ho avuto un bug in IE7 (funziona bene in IE6) in cui l'utilizzo dei metodi jQuery di cui sopra cancellava il file Selezionare nel DOM ma non sullo schermo.Utilizzando la barra degli strumenti per sviluppatori di IE ho potuto confermare che il file Selezionare era stato cancellato e aveva i nuovi elementi, ma visivamente il Selezionare mostrava ancora i vecchi elementi, anche se non era possibile selezionarli.

La soluzione consisteva nell'utilizzare metodi/proprietà DOM standard (come aveva l'originale del poster) per cancellare anziché jQuery, utilizzando comunque jQuery per aggiungere opzioni.

$('#mySelect')[0].options.length = 0;

Se il tuo obiettivo è rimuovere tutte le opzioni dalla selezione tranne la prima (in genere l'opzione "Scegli un articolo") potresti utilizzare:

$('#mySelect').find('option:not(:first)').remove();

Non sono sicuro di cosa intendi esattamente con "aggiungi uno e selezionalo", poiché sarà comunque selezionato per impostazione predefinita.Ma se ne aggiungessi più di uno, avrebbe più senso.Che ne dici di qualcosa del tipo:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Risposta a "MODIFICA":Puoi chiarire cosa intendi con "Questa casella di selezione è popolata da una serie di pulsanti di opzione"?UN <select> l'elemento non può (legalmente) contenere <input type="radio"> elementi.

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

$("#control").html("<option selected=\"selected\">The Option...</option>");

Grazie alle risposte che ho ricevuto, ho potuto creare qualcosa di simile al seguente, adatto alle mie esigenze.La mia domanda era alquanto ambigua.Grazie per avermi seguito.Il mio problema finale è stato risolto includendo "selezionato" nell'opzione che volevo selezionata.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Per prima cosa deseleziona tutte le opzioni esistenti tranne la prima (--Seleziona--)

Aggiungi nuovi valori di opzione utilizzando il loop uno per uno

$('#ddlCustomer').find('option:not(:first)').remove();
for (var i = 0; i < oResult.length; i++) {
   $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
}

Che ne dici di cambiare semplicemente l'HTML in nuovi dati.

$('#mySelect').html('<option value="whatever">text</option>');

Un altro esempio:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

Un altro modo:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

Sotto questo link ci sono le buone pratiche https://api.jquery.com/select/

Ho trovato in rete qualcosa di simile qui sotto.Con migliaia di opzioni come nella mia situazione, questo è molto più veloce di .empty() O .find().remove() da jQuery.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

Ulteriori informazioni Qui.

Basandosi sulla risposta di mauretto, questo è un po' più facile da leggere e comprendere:

$('#mySelect').find('option').not(':first').remove();

Per rimuovere tutte le opzioni tranne una con un valore specifico, puoi utilizzare questo:

$('#mySelect').find('option').not('[value=123]').remove();

Sarebbe meglio se l'opzione per essere aggiunto fosse già presente.

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

La prima riga di codice rimuoverà tutte le opzioni di una casella di selezione poiché non è stato menzionato alcun criterio di ricerca delle opzioni.

La seconda riga di codice aggiungerà l'Opzione con il valore specificato("testValue") e Text("TestText").

Utilizza jquery puntello() per cancellare l'opzione selezionata

$('#mySelect option:selected').prop('selected', false);

Questo sostituirà il tuo mySelect esistente con un nuovo mySelect.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

Puoi farlo semplicemente sostituendo html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

Spero che funzionerà

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

salvare i valori delle opzioni da aggiungere in un oggetto
cancella le opzioni esistenti nel tag di selezione
iterare l'oggetto elenco e aggiungere il contenuto al tag select previsto

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

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

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ho visto questo codice in select2https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

$('#mySelect).val(null).trigger('change');

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow