Як ви видалите всі параметри поля вибору, а потім додайте один варіант і виберіть його за допомогою 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: Намагаючись змусити наслідувати цей код, я використовую такий код щоразу, коли сторінку / форму скидають. Це поле для вибору заповнюється набором перемикачів. .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>') ;

Але обидві відповіді привели мене до остаточного рішення ..

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

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

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

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

Якщо ваша мета - вилучити всі параметри з вибору, окрім першого (як правило, опція "Виберіть товар"), яку ви можете використати:

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

У мене виникла помилка в IE7 (прекрасно працює в IE6), де за допомогою вищевказаних методів jQuery очистить вибір у DOM, але не на екрані. Використовуючи панель інструментів для розробників IE, я міг підтвердити, що вибір був очищений та у ньому були нові елементи, але візуально виділення все ще показало старі елементи - хоча ви не змогли їх вибрати.

Виправлення полягало у використанні стандартних методів / власних DOM (як це було в оригіналі плаката), а не jQuery - все ще використовуючи jQuery для додавання параметрів.

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

Не впевнений, що саме ви маєте на увазі під "додавання і виберіть його", оскільки воно буде вибране за замовчуванням. Але, якби ви додали більше одного, це мало б більше сенсу. Як щодо чогось такого:

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

Відповідь на "редагування" : Чи можете ви уточнити, що ви маєте на увазі під цим "полем вибору, заповненим набором перемикачів"? <select>Елемент не може ( по закону) містять <input type="radio">елементи.

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

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

Завдяки отриманим відповідям я зміг створити щось на кшталт наступного, що відповідає моїм потребам. Моє запитання було дещо неоднозначним. Дякуємо за продовження роботи. Мою остаточну проблему було вирішено, включивши "вибраний" у варіант, який я хотів обрати.

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

Як щодо просто зміни 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>
');

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

Я знайшов у мережі щось на зразок нижче. З тисячами варіантів, як у моїй ситуації, це набагато швидше, ніж .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;
}

Більше інформації тут .

Інший спосіб:

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

Під цим посиланням є хороші практики https://api.jquery.com/select/

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

Перший рядок коду видалить усі параметри вікна вибору, оскільки не було згадано жодного критерію пошуку варіантів.

Другий рядок коду додасть параметр із заданим значенням ("testValue") та текстом ("TestText").

Спираючись на відповідь Моурето, це трохи легше читати та розуміти:

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

Щоб видалити всі параметри, крім одного із певним значенням, ви можете скористатися цим:

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

Це було б краще, якби опція для додавання вже була.

Використовує jquery prop (), щоб очистити вибраний варіант

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

Це замінить існуючий mySelect новим mySelect.

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

Це можна зробити просто замінивши html

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

Лише один рядок, щоб видалити всі параметри з тегу вибору, і після того, як ви зможете додати будь-які варіанти, потім зробіть другий рядок, щоб додати параметри.

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

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

• збережіть параметри параметрів, які слід додати до об'єкта
• очистити існуючі параметри в тезі вибору
• повторіть об'єкт списку та додайте вміст до призначеного тегу вибору

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>

Я бачив цей код у Select2 - Очищення виділень

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

Цей код добре працює з jQuery навіть без Select2

Сподіваюся, це спрацює

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

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