jQuery在選擇框中添加空白選項字段

Question

我有以下用於兩個選擇字段的jQuery代碼。

$(document).ready(function() { 
    $("#select1").change(function(){ 
     $('#trblock').fadeIn(); 
     if ($(this).data('options') == undefined) { 
     $(this).data('options', $('#select2 option').clone()); 
     } 
     var id = $(this).val(); 
     var options = $(this).data('options').filter('[value=' + id + ']'); 
     $('#select2').html(options); 
    }); 
}); 

但是我希望第二個選擇框有ID =「select2」在頂部加載一個額外的空白選項。我試圖簡單地添加HTML部分，但我認爲，由於上面的jQuery代碼效果，它不允許它。所以我認爲修改jQuery部分將完成任務。但我有一個新手jQuery。請幫助我如何得到它。

在HTML中就像這樣。

<select name="" id="select2"> 
<option value=""></option> // I want this here (by changing/adding codes in jquery) 
<option value="1" date="01">Value 1</option> 
<option value="2" date="02">Value 2</option> 
<option value="3" date="03">Value 3</option> 
<option value="4" date="04">Value 4</option> 
<option value="5" date="05">Value 5</option> 
</select> 

Answer 1

首先創建空的選項，然後用.append()

$(document).ready(function() { 
    $("#select1").change(function(){ 
     $('#trblock').fadeIn(); 
     if ($(this).data('options') == undefined) { 
     $(this).data('options', $('#select2 option').clone()); 
     } 
     var id = $(this).val(); 
     var options = $(this).data('options').filter('[value=' + id + ']'); 
     $('#select2').html('<option value="">').append(options); 
    }); 
});  

Answer 2

添加其他人只是使用jquery的前置（）在頂部增加一個選項。

$('#select2').prepend('<option value="">');