Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью 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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

Answer 9

Благодаря ответам, которые я получил, я смог создать что-то вроде следующего, которое соответствует моим потребностям. Мой вопрос был несколько двусмысленным. Спасибо за продолжение. Моя последняя проблема была решена путем включения «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>

Answer 10

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));
   }