Question

I’m trying to take all the <select> elements within a particular <div> and capture the option selected, then replace the select box with a <div> 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() {  
    $('select option:selected').replaceWith(function() {
        return $('<div>' + $('option:selected').text() + '</div>');
    });
}); 

Answer 1

The solution I came up with was to grab the option selected and add it to a div placed after that select element. Then go back and remove the element before proceeding to the next select.

$('#receivecontainer select').each(function() { 
            var selectvalue = $("option:selected", this).text();
            $('<div class="answer">' +selectvalue+ '</div>').insertAfter(this);
            $(this).remove();
 });