獲取先前選定的值或防止默認選擇

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

可以綁定change事件處理函數的元素和存儲在一個變量的新值。如果該值是一個空字符串，將其設置爲無論是在變量：

$('#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 

DEMO

Answer 2

不，你不能這樣做，因爲更改事件是在選擇集中之後觸發的，而不是在選擇更改之前觸發。 「before beforechange」事件中沒有本地，但是您可以在選擇更改後刪除空值，使其不再可用。

代碼做到這一點：

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

Answer 3

沒有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/

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