jQuery - replace element code while keeping children unchanged

Question

Couldn't find anything close enough to what I want that I could make work for my specific issue so here goes:

I've got a select button that I need to change the onchange parameter for after page load and add a form element before it. Here's the HTML:

<select name="dnn$ctr2027$Fixture$ddlRounds" onchange="javascript:setTimeout('__doPostBack(\'dnn$ctr2027$Fixture$ddlRounds\',\'\')', 0)" id="dnn_ctr2027_Fixture_ddlRounds"><option value="">---All Rounds---</option>
<option selected value="337"></option>
<option value="353">Round 2</option>
<option value="354">Round 3</option>
<option value="338">Round 4</option>
<option value="348">Round 5</option>
etc
etc.....
</select>

Here's what I've managed to make so far piecing snippets from other answers I've found:

var divToRemove = jQuery('#dnn_ctr2027_Fixture_ddlRounds');
var children = elToRemove.children().detach();
divToRemove.replaceWith('<form name="roundSelect" action="#tround" method="get"><select name="dnn$ctr2027$Fixture$ddlRounds" onchange="document.roundSelect.submit();" id="dnn_ctr2027_Fixture_ddlRounds">').append(children);

This works in replacing the select data and adding the form in front of it but it doesn't give me the child option elements and instead leaves me with a blank select field.

Any ideas?

Answer 1

You can use .wrap() along with .attr() - to change the onchange value / using .change() event handler for a jQuery-ish solotion

$('#dnn_ctr2027_Fixture_ddlRounds').attr('onchange', 'document.roundSelect.submit();').wrap('<form name="roundSelect" action="#tround" method="get"/>');

Or better

$('#dnn_ctr2027_Fixture_ddlRounds').change(function(){
    document.roundSelect.submit();
}).wrap('<form name="roundSelect" action="#tround" method="get"/>');

Demo: Fiddle