Question

So I have all my drop down lists marked with class="ddl"

I used this, wanting to add “Select” as a first element for ALL the drop down lists on the page – there are several drop down lists.

 $(".ddl option").eq(0).before($("<option></option>").val("").text("Select"));

But it only works on the first drop down list…Do I need to loop through each one?

html

<select class="ddl" id="ddl-id1" name="ddl-name1">
<option value="6">option 1 text</option>
<option value="11">option 2 text</option>
<option value="19">option 3 text</option>
<!-- etc -->
</select>     


<select class="ddl" id="ddl-id2" name="ddl-name2">
<option value="7">some text</option>
<option value="10">some other text</option>
<option value="24">more text</option>
<!-- etc -->
</select>  

Answer 1

Try this instead

$(".ddl option:first-child").before($("<option></option>").val("").text("Select"));

Here it is in action.

EDIT:

If one of the dropdowns is empty, you can use this approach

$(".ddl").prepend($("<option></option>").val("").text("Select"));

Here it is in action with an empty dropdown