Question

I’m trying to take all the elements within a particular and capture the option selected, then replace the select box with a containing the selected option. Here is the code I have so far, but it isn’t working. it copies all the selected options from all the select boxes on the page into each div instead of just the one selected in the select tag it’s replacing.

$('#receivecontainer select').each(function() {  
 $('#receivecontainer select option:selected').each(function() { 
            var optionselected = $(this).text();
    $('select').replaceWith(function() { 
      return $('<div>' + $(optionselected).text() + '</div>'); 
     }); 
   });
 });

Answer 1

This code should work:

$('#receivecontainer select').each(function() {
    var sel_text = $(this).find('option:selected').text();
    $(this).replaceWith(function(){
        return $("<div>" + sel_text + "</div>");
    })
});

Anyways, did you consider just disabling the selects — and maybe using css to make them look nicer?

Update

There’s no need to use a callback as argument of replaceWith; this works as well:

$('#receivecontainer select').each(function() {
    var sel_text = $(this).find('option:selected').text();
    $(this).replaceWith("<div>" + sel_text + "</div>");
});

As you can test here: http://jsfiddle.net/PwvrL/6/

Update – even shorter code

You can also use .val() on the select box to get the text of the currently selected item; this way you can write even shorter code:

$('#receivecontainer select').each(function() {
    $(this).replaceWith("<div>" + $(this).val() + "</div>");
});

See the updated example: http://jsfiddle.net/PwvrL/11/