如何使用jQuery设置选择框的第一个选项？

Question

I have a select list:

<select id='sf-field-1'> 
    <option></option> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select>

How can I set the value of option value to the below by using jQuery?

<select id='sf-field-1'> 
    <option> -- Select -- </option> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select>

I also tried jQuery("#sf-field-1 :first-child").attr("value", 0); but this did not work for me. Any ideas?

Answer 1

Your second attempt was close, you just need to set the text() of the element, not its value:

$("#sf-field-1 :first-child").text(" -- Select -- ");

Example fiddle

Answer 2

Another way to do this is using prepend function : What you do is that create dropdownlist with select options

<select id='sf-field-1'> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select>

and then using following jquery code add first option.

    var newOption = "<option selected='"+"selected"+"  '>--Select--</option>"; 
$("#sf-field-1").prepend(newOption);

Answer 3

基于编辑第一个选项名称可以使用

$('#sf-field-1 > option:empty:first').text(" -- Select -- ");