Hoe verwijdert u alle opties van een select vak en voegt u vervolgens één optie toe en selecteert u deze met jQuery?

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

Antwoord 11

Ik heb gevonden op het net zoiets als hieronder. Met duizenden opties zoals in mijn situatie is dit een stuk sneller dan .empty()of .find().remove()van 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;
}

meer info hier .

Antwoord 12

Hoe zit het met alleen het wijzigen van de HTML naar nieuwe gegevens.

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

Nog een voorbeeld:

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

Antwoord 13

Nog een manier:

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

Onder deze link vindt u goede praktijken https://api.jquery.com/select/

Antwoord 14

1. Wis eerst alle bestaande opties behalve de eerste(–Select–)

2. Voeg nieuwe optiewaarden toe met lus één voor één

   $('#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));
   }
   

Antwoord 15

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

De eerste regel code verwijdert alle opties van een selectievak omdat er geen zoekcriteria voor opties zijn genoemd.

De tweede regel code voegt de optie toe met de opgegeven waarde(“testValue”) en Text(“TestText”).

Antwoord 16

Voortbouwend op het antwoord van Mauretto, is dit iets gemakkelijker te lezen en te begrijpen:

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

Als u alle opties wilt verwijderen, behalve één met een specifieke waarde, kunt u dit gebruiken:

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

Dit zou beter zijn als de toe te voegen optie er al was.

Antwoord 17

Gebruikt de jQuery prop()om de geselecteerde optie te wissen

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

Antwoord 18

Hiermee wordt uw bestaande MySelection vervangen door een nieuwe MySelect.

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

Antwoord 19

U kunt eenvoudigweg doen door HTML

te vervangen

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

Antwoord 20

• Sla de optiewaarden op die moeten worden toegevoegd in een object
• Best bestaande opties in de SELECT-tag
• herhoogt het lijstobject en voeg de inhoud toe aan de beoogde select tag

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>

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

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

let select = document.getElementById("mySelect");
select.innerHTML = "";

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('');

mySelect.innerHTML = `<option selected value="whatever">text</option>`

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