Сбросить значение окна выбора

Я пытаюсь сбросить значение двух полей выбора, структурированных таким образом,

<select>
  <option></option>
  <option></option>
  <option></option>
</select>

<select>
  <option></option>
  <option></option>
  <option></option>
</select>

JQuery,

$('select').each(function(idx, sel) {
  $(sel).find('option :eq(0)').attr('selected', true);
});

К сожалению, независимо от того, сколько способов я пробовал, этого просто не происходит. Ничего в консоли. Я понятия не имею, что происходит? Я знаю, что должен быть способ сделать это, вы можете сделать что-нибудь с JS

РЕДАКТИРОВАТЬ:

Я понял, что проблема возникает, когда я пытаюсь запустить код при щелчке элемента dom, однако я знаю, что код должен работать, потому что, когда у меня есть

$('p').click(function(){
  console.log('test');
});

Он выводит "тест" на консоль, но когда я включаю код в эту функцию, ничего не происходит. Почему это?

Ответ 1

Я предполагаю, что вы хотите сбросить только один элемент. Сброс всей формы прост: вызовите его метод сброса.

Самый простой способ "сбросить" элемент выбора - установить для свойства selectedIndex значение по умолчанию. Если вы знаете, что ни один из параметров не выбран по умолчанию, просто установите для выделенного элемента selectedIndex значение соответствующее значение:

function resetSelectElement(selectElement) {
    selecElement.selectedIndex = 0;  // first option is selected, or
                                     // -1 for no option selected
}

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

function resetSelectElement(selectElement) {
    var options = selectElement.options;

    // Look for a default selected option
    for (var i=0, iLen=options.length; i<iLen; i++) {

        if (options[i].defaultSelected) {
            selectElement.selectedIndex = i;
            return;
        }
    }

    // If no option is the default, select first or none as appropriate
    selectElement.selectedIndex = 0; // or -1 for no option selected
}

И остерегайтесь устанавливать атрибуты, а не свойства, они имеют разные эффекты в разных браузерах.

Ответ 2

Это работает для меня:

$('select').prop('selectedIndex', 0);

FIDDLE

Ответ 3

В дополнение к ответу на java-скрипт @RobG pure/vanilla вы можете сбросить значение "по умолчанию" с помощью

selectElement.selectedIndex = null;

Кажется, -1 отменяет выбор всех элементов, null выбирает элемент по умолчанию, а 0 или положительное число выбирает соответствующий параметр индекса.

Параметры в выбранном объекте индексируются в том порядке, в котором они определены, начиная с индекса 0.

источник

Ответ 4

Что для меня работало:

$('select option').each(function(){$(this).removeAttr('selected');});

Ответ 5

neRok коснулся этого ответа выше, и я просто расширяю его.

Согласно слегка устаревшему, но удобному справочнику O'Reilly, Javascript: The Definitive Guide:

Свойство selectedIndex объекта Select является целым числом, которое указывает индекс выбранной опции в объекте Select. Если параметр не выбран, selectIndex - -1.

Таким образом, следующий код javascript "сбросит" объект "Выбрать" без каких-либо параметров:

select_box = document.getElementById("myselectbox");
select_box.selectedIndex = -1;

Обратите внимание, что изменение выбора таким образом не вызывает обработчик события onchange().

Ответ 6

использовать .val('') setter

Пример jsfiddle

$('select').val('1');

Ответ 7

Я нашел небольшую полезную функцию некоторое время назад, и я использовал ее для сброса элементов моей формы с тех пор (источник: http://www.learningjquery.com/2007/08/clearing-form-data):

function clearForm(form) {
  // iterate over all of the inputs for the given form element
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it ok to reset the value attr of text inputs, 
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared 
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

... или как плагин jQuery...

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};