Question

I am using a plugin to create a real slick jquery select (dropdown) menu.

The html requires the following format:

<select>
<option value="0" selected="selected" data-skip="1">Choose an Artist</option>
<option value="1">Title</option>
<option value="2">Title</option>
<option value="3">Title</option>
<option value="4">Title</option>
</select>

I want to use wordpress to display certain pages in a select menu:

<?php wp_dropdown_pages('child_of=96'); ?>

WordPress successfully returns a select menu of all of the correct pages. I need a jquery solution to insert this before the first select element: <option value="0" selected="selected" data-skip="1">Choose an Artist</option> and I also need jquery to assign an option value to the next select item (see markup above). So basically, I need a jquery solution to append that line before the first select item and also assign a consecutive option value (i++) to the next select item.

Thanks in advance, and I hope that makes sense.

Answer 1

You need to prepend your new list option to your select and then loop over the options and insert value attribute with a number that increases each time the function loops.

    $("select").prepend("<option selected='selected' data-skip='1'>Choose an Artist</option>'");
       var i = 1;
    $("select option").each(function() {
       $(this).attr("value",i);
       i++;
     });

Fiddle: jsfiddle.net/67de7/1