Question

I’m a jQuery beginner and here’s what I want to do :

I have a form containing two <select> controls. Each of them has a different <label>.
I need to move the text content of each <label> to the first <option> (<option value="" selected="selected">) of it’s associated <select>.

Here’s my jQuery :

jQuery(document).ready(function(){
    var CONTACT_FILTER_LABEL = jQuery(".contact-filter option:selected").closest("label").text();

    jQuery(".contact-filter option:selected").each(function(){
        jQuery(this).html(CONTACT_FILTER_LABEL);
    });    
});

I guess that I also need to fill the value attribute of the <option> control with the same content. I tried a whole lot of things but couldn’t make it yet.

jsFiddle link (UPDATED!) : http://jsfiddle.net/y9JaE/27/.

Answer 1

Try this:

$(function() {
    $("select").each(function() {
        var text = $(this).prev("label").text();
        $(this).children("option[selected='selected']").val(text).text(text);
    });
});​

fiddle demo

Obviously your jQuery selectors will vary depending on the structure/css classes you use, as will you have to decide on the best of .siblings(), .closest() etc depending on tag structure.