Как сделать reset выбранную jquery опцию выбора с помощью jQuery?

Ответ 1

Установка значения элемента select в пустую строку - это правильный способ сделать это. Однако это обновляет только корневой элемент select. Пользовательский элемент chosen не знает, что root select был обновлен.

Чтобы уведомить chosen, что параметр select был изменен, вы должны вызвать chosen:updated:

$('#autoship_option').val('').trigger('chosen:updated');

или, если вы не уверены, что первый параметр является пустой строкой, используйте это:

$('#autoship_option')
    .find('option:first-child').prop('selected', true)
    .end().trigger('chosen:updated');

Прочитайте документацию здесь (найдите раздел под названием Обновление, выбранное динамически).

P.S. Старые версии Chosen используют несколько другое событие:

$('#autoship_option').val('').trigger('liszt:updated');

Ответ 2

Первый вариант должен быть достаточным: http://jsfiddle.net/sFCg3/

jQuery('#autoship_option').val('');

Но вы должны убедиться, что вы запускаете это событие, например, click кнопки или ready или документа, например, на jsfiddle.

Также убедитесь, что theres всегда атрибут value в тегах параметров. Если нет, некоторые браузеры всегда возвращают пустой на val().

Edit:
Теперь, когда вы уточнили, что вы используете плагин Chosen, вам нужно позвонить

$("#autoship_option").trigger("liszt:updated");

после изменения значения для обновления интерфейса.

http://harvesthq.github.com/chosen/

Ответ 3

Попробуйте перезагрузить обновление. Выберите поле с последним выбранным JS.

$("#form_field").trigger("chosen:updated");

http://harvesthq.github.io/chosen/

Будет обновлено выбранное раскрывающееся меню с новым загруженным блоком выбора с помощью Ajax.

Ответ 4

Попробуйте следующее:

$("#autoship_option option[selected]").removeAttr("selected");

Ответ 5

Я использую это:

$('idSelect').val([]);

проверено на IE, Safari и Firefox

Ответ 6

$('#autoship_option').val('').trigger('liszt:updated');

и установите значение параметра по умолчанию ''.

Он должен использоваться с выбранным обновленным jQuery, доступным по этой ссылке: https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js.

Я провел один полный день, чтобы узнать в конце, что jquery.min отличается от chosen.jquery.min

Ответ 7

Это более эффективно, чем поиск.

$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");

Ответ 8

var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

Используйте вышеприведенную конфигурацию и примените class='chosen-select-deselect', чтобы вручную отменить выбор и установить значение пустым

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

var config = {
  '.chosen-select'           : {allow_single_deselect:true},//Remove if you do not need X button in combo
  '.chosen-select-deselect'  : {allow_single_deselect:true},
  '.chosen-select-no-single' : {disable_search_threshold:10},
  '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
  '.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
  $(selector).chosen(config[selector]);
}

Ответ 9

jQuery("#autoship_option option:first").attr('selected', true);

Ответ 10

Я не уверен, что это относится к более старой версии выбранных, но теперь в текущей версии (v1.4.1) у них есть опция $('#autoship_option').chosen({ allow_single_deselect:true }); Это добавит значок "x" рядом с именем selected.Use "x", чтобы очистить "select" feild.

PS: убедитесь, что у вас есть "selected-sprite.png" в нужном месте в соответствии с выбранным .css, чтобы значки были видны.

Ответ 11

В Chrome версии 49

вам всегда нужен этот код

$("select option:first").prop('selected', true)

Ответ 12

Я думаю, вам нужно назначить новое значение для выбора, поэтому, если вы хотите очистить свой выбор, вы, вероятно, захотите присвоить его тому, у которого есть value = "". Я думаю, что вы сможете получить его, назначив значение пустой строке, поэтому .val('')

Ответ 13

HTML:

<select id="autoship_option" data-placeholder="Choose Option..." 
        style="width: 175px;" class="chzn-select">
    <option value=""></option>
    <option value="active">Active Autoship</option>
</select>
<button id="rs">Click to reset</button>

JS:

$('#rs').on('click', function(){
    $('autoship_option').find('option:selected').removeAttr('selected');
});

Fiddle: http://jsfiddle.net/Z8nE8/

Ответ 14

Вы можете попробовать это при выпадении reset (пустой)

 $("#autoship_option").click(function(){
            $('#autoship_option').empty(); //remove all child nodes
            var newOption = $('<option value=""></option>');
            $('#autoship_option').append(newOption);
            $('#autoship_option').trigger("chosen:updated");
        });

Ответ 15

Новые библиотеки Chosen не используют liszt. Я использовал следующее:

document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");

Ответ 16

Если вам нужно выбрать первый вариант независимо от его значения (иногда первое значение параметра не пустое), используйте это:

$('#autoship_option').val($('#autoship_option option:first-child').val()).trigger("liszt:updated");

Он получит значение первой опции и установит ее как выбранную, а затем активирует обновление в Избранном. Поэтому он работает как reset для первой опции в списке.

Ответ 17

Точно так же у меня было такое же требование. Но сброс выпадающего списка путем установки пустой строки с jquery не будет работать. Вы также должны инициировать обновление.

Html:
<select class='chosen-control'>
<option>1<option>
<option>2<option>
<option>3<option>
</select>

Jquery:
$('.chosen-control').val('').trigger('liszt:updated');

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

$('.chosen-control').val('').trigger("chosen:updated");

Ссылка: Как reset выбранный выбор Jquery

Ответ 18

jQuery('.chosen-processed').find('.search-choice-close').click();

Ответ 19

Просто добавьте триггер смены следующим образом:

$('#selectId').val('').trigger('change');

Ответ 20

Если вы используете chosen плагин jquery, то для обновления или очистки содержимого выпадающего используйте:

$('#dropdown_id').empty().append($('< option>'))

dropdown_id.chosen().trigger("chosen:updated")

chosen:updated событие будет re-build самостоятельно на основе обновленного контента.

Ответ 21

Из вышеперечисленных решений у меня ничего не получалось. Это сработало:

$('#client_filter').html(' ');//this worked

Это почему? :)

$.ajax({ 
        type: 'POST', 
        url: xyz_ajax,
        dataType: "json",
        data : { csrfmiddlewaretoken: csrftoken,
                instancess : selected_instances }, 
        success: function(response) { 
            //clear the client DD       
            $('#client_filter').val('').trigger('change') ; //not working
            $('#client_filter').val('').trigger('chosen:updated') ; //not working
            $('#client_filter').val('').trigger('liszt:updated') ; //not working
             $('#client_filter').html(' '); //this worked
             jQuery.each(response, function(index, item) {
                  $('#client_filter').append('<option value="'+item.id+'">' + item.text + '</option>');
                });                 
           $('#client_filter').trigger("chosen:updated");
        }
      });
     }