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

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

Мое поле выбора следующее.

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

EDIT: Следующий код был полезен при цепочке. Однако (в Internet Explorer) .val('whatever') не выбран вариант, который был добавлен. (Я использовал одно и то же "значение" как в .append, так и в .val.)

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

EDIT: пытаясь заставить его подражать этому коду, я использую следующий код всякий раз, когда страница/форма reset. Это поле выбора заполняется набором переключателей. .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";

EDIT: выбранный ответ был близок к тому, что мне нужно. Это сработало для меня:

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

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

+980
06 сент. '08 в 20:53
источник поделиться
23 ответа
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
+1596
06 сент. '08 в 21:01
источник
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
+661
16 дек. '09 в 21:07
источник

Связанные вопросы


Похожие вопросы

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

document.getElementById("selectID").options.length = 0;
+120
13 нояб. '13 в 19:45
источник

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

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

$('#mySelect')[0].options.length = 0;
+74
11 янв. '10 в 9:22
источник

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

$('#mySelect').find('option:not(:first)').remove();
+70
27 мар. '13 в 9:56
источник

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

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

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

+28
08 сент. '08 в 18:51
источник
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
+24
03 июн. '09 в 20:48
источник
$("#control").html("<option selected=\"selected\">The Option...</option>");
+20
30 мар. '11 в 2:30
источник

Благодаря полученным ответам я смог создать что-то вроде следующего, что соответствует моим потребностям. Мой вопрос был несколько неоднозначным. Спасибо за продолжение. Моя последняя проблема была решена путем включения "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>
+10
09 сент. '08 в 22:04
источник
  • Сначала очистить весь существующий вариант execpt первый (- Select -)

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

    $('#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));
    }
    
+8
30 сент. '15 в 6:58
источник

По-другому:

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

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

+7
13 июл. '17 в 15:55
источник

Как просто изменить 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>
');
+7
12 нояб. '14 в 11:45
источник

На основе ответа mauretto это немного легче читать и понимать:

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

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

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

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

+6
18 июн. '15 в 13:52
источник

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

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

+6
08 апр. '15 в 9:42
источник
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

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

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

+5
12 окт. '18 в 9:14
источник

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

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');
+4
18 окт. '13 в 7:41
источник

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

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
+4
04 окт. '16 в 0:07
источник

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

$('#mySelect option:selected').prop('selected', false);
+4
01 февр. '14 в 11:09
источник
  • сохранить значения параметров для добавления в объект
  • очистить существующие параметры в теге выбора
  • итерируйте объект списка и добавьте содержимое к предполагаемому тегу выбора

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>
+1
03 сент. '18 в 11:17
источник

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

$('#mySelect).val(null).trigger('change');
+1
25 янв. '19 в 6:34
источник

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

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
+1
23 окт. '16 в 4:06
источник

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

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

$('.ddlsl').append(new Option('Select all', 'all'));
0
17 июл. '19 в 6:29
источник
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('');
0
19 авг. '18 в 17:22
источник

Посмотрите другие вопросы по меткам или Задайте вопрос