JQuery - заменить код элемента, сохраняя при этом ребенок неизменных

Question

Не удалось найти что-либо достаточно близко к тому, что я хочу, чтобы я мог сделать работу для моего конкретного вопроса, так что здесь идет:

У меня есть кнопки выбора, что мне нужно для изменения параметра onchange для загрузки страницы и добавления элемента формы перед ним. Вот 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> 

Вот что я сумел сделать так далеко кусочки фрагментов из других ответов, которые я нашел:

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); 

Это работает в замене выберите данные и добавить форму в но он не дает мне элементы дочерних элементов и вместо этого оставляет меня с пустым полем.

Любые идеи?

Answer 1

Вы можете использовать .wrap() вместе с .attr() - изменить значение OnChange/с помощью .change() обработчика событий для JQuery-иш solotion

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

Или лучше

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

Демо: Fiddle