Question

我正在尝试重置两个选择字段的值，结构如下，

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

它将'test'输出到控制台，但是当我在此函数中包含代码时，没有任何反应。这是为什么？

Answer 1

我认为你只想重置一个元素。重置整个表单很简单：调用其重置方法。

“重置”select元素的最简单方法是将其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
}

谨防设置属性而不是属性，它们在不同的浏览器中具有不同的效果。

Answer 2

这对我有用：

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

FIDDLE

Answer 3

除了@ RobG的纯/香草javascript答案之外，您还可以重置为＆＃39;默认＆＃39;值

selectElement.selectedIndex = null;

似乎-1取消选择所有项目，null选择默认项目，0或正数选择相应的索引选项。

select对象中的选项按照它们的定义顺序编制索引，从索引0开始。

source

Answer 4

对我有用的是：

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

Answer 5

neRok触及了上面这个答案，我只是在扩展它。

根据稍微陈旧但有用的O'Reilly参考书，Javascript: The Definitive Guide：

Select对象的 selectedIndex 属性是一个整数，它指定Select对象中所选选项的索引。如果未选择任何选项，则 selectedIndex 为-1。

因此，以下javascript代码会将Select对象“重置”为未选择的选项：

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

请注意，以这种方式更改选择不会触发 onchange（）事件处理程序。

Answer 6

使用.val('') setter

jsfiddle example

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

Answer 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's 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;
  });
};

Answer 8

最简单的不使用javaScript的方法是将所有

重置选择框的值

8 个答案: