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

Question

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

Мой блок выбора выглядит следующим образом.

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

РЕДАКТИРОВАТЬ: следующий код был полезен для цепочки. Однако (в Internet Explorer) .val('whatever') не выбрал добавленную опцию. (Я использовал одно и то же значение в .append и .val.)

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

РЕДАКТИРОВАТЬ: Пытаясь заставить его подражать этот код, я использую следующий код всякий раз, когда страница / форма сбрасывается. Это поле выбора заполняется набором переключателей. .focus() был ближе, но опция не была выбрана, как это было с .selected= "true". Нет ничего плохого в моем существующем коде - я просто пытаюсь изучить jQuery.

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

РЕДАКТИРОВАТЬ: выбранный ответ был близок к тому, что мне нужно. Это сработало для меня:

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

Но оба ответа привели меня к моему окончательному решению ..

Answer 1

Как насчет просто изменить 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>
');

Answer 2

Другой способ:

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

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

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

.

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

Answer 7

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

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

Answer 8

Использует jquery prop () , чтобы очистить выбранную опцию

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

Answer 9

я видел этот код в select2 https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

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

Answer 10

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

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>