Как удалить все параметры поля выбора, а затем добавить один вариант и выбрать его с помощью jQuery?

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

Не совсем уверен, что вы имеете в виду под «добавить и выбрать», так как он все равно будет выбран по умолчанию. Но если бы вы добавили больше одного, это имело бы больший смысл. Как насчет чего-то вроде:

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

Ответ на "РЕДАКТИРОВАТЬ": Не могли бы вы пояснить, что вы имеете в виду, говоря «Это поле выбора заполнено набором переключателей»? Элемент <select> не может (юридически) содержать элементы <input type = "radio">.

Благодаря полученным ответам я смог создать что-то вроде следующего, что соответствует моим потребностям. Мой вопрос был несколько двусмысленным. Спасибо за продолжение. Моя последняя проблема была решена включением «selected» в вариант, который я хотел выбрать.

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

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

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

У меня была ошибка в IE7 (отлично работает в IE6), когда использование вышеуказанных методов jQuery очищало Выбрать в DOM, но не на экране. Используя панель инструментов разработчика IE, я мог подтвердить, что Выбрать был очищен и имел новые элементы, но визуально Выбрать все еще отображал старые элементы, даже если вы не могли их выбрать.

Исправление заключалось в использовании стандартных методов / свойств DOM (как в оригинале плаката) для очистки, а не jQuery - по-прежнему с использованием jQuery для добавления параметров.

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

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

Если ваша цель - удалить все параметры из выбора, кроме первого (обычно это параметр «Выберите элемент»), вы можете использовать:

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

Это заменит ваш существующий mySelect новым mySelect.

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

почему бы просто не использовать простой javascript?

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

Использует jquery опора () для очистки выбранной опции

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

Как насчет того, чтобы просто изменить HTML на новые данные.

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

Другой пример:

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

Я нашел в сети что-то вроде ниже. С тысячами вариантов, как в моей ситуации, это намного быстрее, чем .empty() или .find().remove() из 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;
}

Подробнее здесь.

Основываясь на ответе Мавретто, это немного легче читать и понимать:

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

Чтобы удалить все параметры, кроме одного с определенным значением, вы можете использовать это:

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

Было бы лучше, если бы опция для добавления уже была там.

1. Сначала очистите все существующие параметры, кроме первого (- Выбрать--)

2. Добавляйте новые значения параметров, используя цикл один за другим

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

Можно просто заменить html

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

Надеюсь, это сработает

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

По-другому:

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

По этой ссылке есть хорошие практики https://api.jquery.com/select/

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

• сохранить значения параметров для добавления в объект
• очистить существующие параметры в теге выбора
• итерация объекта списка и добавление содержимого к предполагаемому тегу выбора

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>

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

Первая строка кода удалит все параметры поля выбора, поскольку критерии поиска параметров не были упомянуты.

Вторая строка кода добавит Option с указанным значением («testValue») и текстом («TestText»).

Я видел этот код в Select2 - Очистка выбора

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

Этот код хорошо работает с jQuery даже без Select2

Just one line to remove all options from the select tag and after you can add any options then make second line to add options.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

One more short way but didn't tried

$('.ddlsl').empty().append(new Option('Select all', 'all'));

Пытаться

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

function setOne() {
  console.info({mySelect});
  mySelect.innerHTML = `<option selected value = "whatever">text</option>`;
}

<button onclick = "setOne()" >set one</button>
<Select id = "mySelect" size = "9"> 
 <option value = "1">old1</option>
 <option value = "2">old2</option>
 <option value = "3">old3</option>
</Select>