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

1077

Используя ядро ​​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>') ;

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

Джей Корбетт
источник

Ответы:

1695
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
Matt
источник
3
@nickf: У меня та же проблема, но мне нужно добавить набор флажков, а не один при изменении выпадающего списка, но мои флажки исходят из xml. это не работает
defau1t
10
Обратите внимание, что вы также можете разбить опцию / attr / text, как:.append($("<option></option>").attr("value", '123').text('ABC!')
Брок Хенсли,
1
@ BrockHensley, я верю, что истинная элегантность этого ответа - правильная цепочка в комбинации с функцией end (). Ваше предложение также будет работать. Из документации API jQuery: «Большинство методов обхода DOM в jQuery работают с экземпляром объекта jQuery и создают новый, соответствующий другому набору элементов DOM. Когда это происходит, создается впечатление, что новый набор элементов помещается в стек это поддерживается внутри объекта. Каждый последующий метод фильтрации помещает новый набор элементов в стек. Если нам нужен более старый набор элементов, мы можем использовать end () для удаления наборов из стека. "
Энтони Мейсон
1
это был единственный способ, которым я смог перестроить свое меню и изменить выбранную опцию в jQuery Mobile на PhoneGap для iOS. Обновление меню впоследствии также требовалось.
xited
3
@BrockHensley Вы могли бы даже пойти так далеко.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns
710
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
Mahzilla
источник
34
Просто из любопытства, «пусто» быстрее, чем «найти»? Похоже, что так и должно быть - потому что «find» будет использовать селектор, а «empty» будет просто грубой силой очищать элемент.
Дэн Эспарза
52
@DanEsparza Я сделал тебя jsperf; empty()оказалось быстрее конечно;) jsperf.com/find-remove-vs-empty
vzwick
Я получил странный сбой с этим решением. Заполнить его можно, но когда я пытаюсь выбрать значение (в моем случае день), я могу записать в журнал значение, но показанное значение в поле выбора остается в первом значении .... Я могу не решить это: /
Takács Zsolt
5
@ TakácsZsolt Может быть, вы должны добавить .val('whatever')в конце цепочки, как в ответе Мэтта.
Кодос Джонсон
.empty () работает с materialize, тогда как .remove () не работает
OverlordvI
127

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

document.getElementById("selectID").options.length = 0;
Шон
источник
7
Я согласен, что это самое простое решение для удаления всех опций, но это отвечает только на половину вопроса ...
Elezar
2
Не приведет ли это к утечке памяти? Элементы option теперь недоступны, но все еще размещены.
Synetech
1
Обычный Старый JS FTW (Для Победы) !!! :)
Раддевус
78

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

$('#mySelect').find('option:not(:first)').remove();
mauretto
источник
10
Это должно быть ответом. Все остальные намеренно удалили первое, чтобы потом его воссоздать, что мне не нравится; это также подразумевает, что они также сохранили первый вариант где-то первым.
76

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

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

$('#mySelect')[0].options.length = 0;
row1
источник
6
Мне также пришлось использовать этот метод в ie6, потому что .empty () заставил мой блок выбора, который содержался в скрытом контейнере, стать видимым, даже когда родительский элемент был скрыт.
Code Commander
2
Этот метод также оказывается чуть-чуть (около 1%) более производительным: jsperf.com/find-remove-vs-empty
vzwick
3
+1 это наиболее читаемый (на мой взгляд) и в ссылке jsPerf (@vzwick связанный) принятый ответ был на 34% медленнее (Опера 20)
Морваэль
35

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

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

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

Бобби Джек
источник
27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
Хейден Чемберс
источник
2
Мы все еще используем IE6, и этот метод не работает. Тем не менее, он работал в FF 3.5.6
Джей Корбетт
3
возможно, придется добавить .change () в конец, чтобы вызвать изменение выбора
Hayden Chambers
22
$("#control").html("<option selected=\"selected\">The Option...</option>");
jvarandas
источник
12

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

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

Джей Корбетт
источник
8

Как насчет просто изменить 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>
');
Шив
источник
8
  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));
    }
Джейдип шил
источник
7

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

Больше информации здесь .

marioosh
источник
7

Другой путь:

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

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

Джон Интриаго Тот
источник
7
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

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

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

Дев Чаухан
источник
Хотя это может ответить на этот вопрос, было бы гораздо более полезным , если вы дали объяснение относительно того , как он отвечает на него.
Ник
6

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

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

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

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

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

humbads
источник
4

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

$('#mySelect option:selected').prop('selected', false);
Мердад
источник
1
.prop () вступает в силу только в jQuery 1.6+. Для jQuery 1.5-, используйте .attr ()
Agi Hammerthief
4

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

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');
Барун
источник
4

Вы можете сделать просто заменив HTML

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
Надим Манзур
источник
4

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

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

$('.ddlsl').append(new Option('Select all', 'all'));
Каушик Шримали
источник
2
  • сохранить значения параметров для добавления в объект
  • очистить существующие параметры в теге выбора
  • итерируйте объект списка и добавьте содержимое к предполагаемому тегу выбора

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>

Нифеми Сола-Охо
источник
2

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

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

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

michael01angelo
источник
1

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

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
Доктор Рассел Хуссейн
источник
это работает, если больше, чем вариант, я не могу выбрать второй
Anburaj_N
0
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('');
Л.Н. Нитарсан
источник