javascript - 获取先前选择的值或阻止选择默认值

Question

是否可以<select>获取先前选择的值或以某种方式阻止默认值？例如我有

<select id="select_site" name="sites" selectedindex="0">
<option value="">Please select site</option>
<option value="4">first</option>
<option value="5" selected="selected">second</option>
<option value="8">third</option>
</select>

因此，如果选择的选项为空值，我需要恢复以前选择的second值。

Answer 1

您可以将更改事件处理程序绑定到元素并将新值存储在变量中。如果该值为空字符串，请将其设置为变量中的任何内容：

$('#select_site').change(function() {
    if (this.value === '') {
        this.value = $(this).data('previous_value');
    }
    else {
        $(this).data('previous_value', this.value);
    }
}).triggerHandler('change'); // <- trigger change event to get initial value

演示

Answer 2

不需要js：

<select id="select_site" name="sites" selectedindex="0">
  <optgroup label="Please select site">
    <option value="4">first</option>
    <option value="5" selected="selected">second</option>
    <option value="8">third</option>
  </optgroup>
</select>

演示：http: //jsbin.com/obeker/1/

参考：https ://developer.mozilla.org/docs/HTML/Element/optgroup

Answer 3

不，您不能这样做，因为更改事件是在选择聚焦后触发的，而不是在选择更改之前触发的。没有本机“onbeforechange”事件，但您可以在选择更改后删除空值，使其不再可用。

执行此操作的代码：

$('select').change(function (event) {
    $this = $(this);
    if ($this.val() !== '') {
        $this.children('option:first').remove();
    }
});