将选择选项设置回默认选择

Question

每当我添加新行时，我都试图将select选项设置回“ choices”。 我在这里怎么办？ 请帮忙。 顺便说一句，添加新行可以正常工作。 这是到目前为止我得到的：

$(document).ready(function() {
   $('#Add-btn').live('click',function() {
      $("#tabName tr:last").before("<tr><td class='greyed'><input type='hidden' name='allele' value='" + a + "'>" + a + "</td><td><input type='button' class='delete' value='Remove'></td></tr>");
   });
});

HTML：

<table id="tabName">
...
<select size='1' id="a" name='a'>
   <option value="None" selected>choices</option>
   <option value='1'>first</option>
   <option value='2'>second</option>
</select>
...
</table>
<div>
   <input id="Add-btn" class="button" type="button" value="Add" />
   <span></span>
</div>

Answer 1

您可以通过使用.val(value)设置值来重新设置它，如下所示：

$("#a").val('None');

总的来说，它看起来像这样：

$(document).ready(function() {
  $('#Add-btn').live('click',function() {
    $("#tabName tr:last").before("<tr><td class='greyed'><input type='hidden' name='allele' value='" + a + "'>" + a + "</td><td><input type='button' class='delete' value='Remove'></td></tr>");
    $("#a").val('None');
  });
});

Answer 2

这是一种通用方法，可让您重置许多值：

jQuery的

$(document).ready(function(){
  var DefaultValuesElements=$(":input").not("#resetvalues");  // The elements you want to reset (in this example, all input values, except for the button with the ID resetvalues

  function getDefaultValues() {
    DefaultValuesElements.each(function() {  // Loop through the elements you want default for
      $(this).attr("defaultvalue",$(this).val());  // Grab the value and save them into a custom attribute ("defaultvalue")
    });
  }

  function setDefaultValues() {
    DefaultValuesElements.each(function() {  // Loop through the elements you want to reset the values for
      $(this).val($(this).attr("defaultvalue"));  // Overwrite the current value with the saved default value
    });
  }

  getDefaultValues();  // Grab the values

  $("#resetvalues").click(function() {  // Belongs to the example below. Whenever the button is pressed...
    setDefaultValues();  // Reset the elements to their default values.
  });
});

您可以将setDefaultValues()代码放入click函数中，但我将它和getDefaultValues()代码放入函数中以使其更加明显。

HTML（示例）

<select size='1' id="a" name='a'>
 <option value="None" selected>choices</option>
 <option value='1'>first</option>
 <option value='2'>second</option>
</select>

<input type="input" name="whatever" value="test">

<input type="button" id="resetvalues" value="Reset values">

此代码在起作用 。

Answer 3

我知道已经回答了这个问题，但是我只想为类似我的用例做出贡献，我想在用户按下esc时将默认值放回到选择框中。 这也可以防止为选择元素触发.change事件。

因此，根据此处和此处提出的想法，这是另一个很好的答案：

var KEYCODE_ESC = 27;
// when esc is pressed while scrolling through the options
// reset value of select to default (first) value
$('select').keyup(function(e) {
    if (e.keyCode == KEYCODE_ESC) {
        console.log('esc key pressed on select element'); 
        $(this).val($(this).children('option:first-child').text());
    } 
});