javascript - Jquery在选择框更改后更改html

Question

我有以下jquery，当选择一个选项时，将添加一些HTML或基于if else语句添加另一个HTML，这工作正常，问题是一旦选择了一个选项，如果我返回并更改它选项，添加的 HTML 不会改变，但如果我添加一个警报，警报会根据选项框的值名称更改，所以我不明白为什么它不根据 change() jquery 函数更改 html。

这是代码

$("select").change(function() {

 option = $("#opcion").val();

if(option == "celulares") {
$(".insert").replaceWith( " <div class='row' id='option2'> <div      class='col-xs-6'>Por favor ingrese el costo de cada celular en dolares: </div><div class='col-xs-6'><form class='form-inline'><div class='form-group'><label class='sr-only' for='exampleInputAmount'>Amount (in dollars)</label><div class='input-group'><div class='input-group-addon'>$</div><input type='text' class='form-control' id='costoproducto' placeholder='Monto'><div class='input-group-addon'>.00</div></div></div><div id='validacioncosto'></div></form></div></div><hr> " + 
  "<div class='row' id='option6'><div class='col-xs-6' id='resultado'></div><div class='col-xs-6'><button type='button' id='calculo' class='btn btn-warning'>Calcular</button></div></div><div class='row' id='result'></div> "); 

} else if(option == "electronica" || option == "juguetes" || option == "repuestos" || option == "otro") {
$(".insert").replaceWith(option);
alert(option);
}
});

和 HTML

 <option></option>                   
 <option value="celulares">Celulares</option>
 <option value="electronica">Electronica</option>
 <option value="juguetes">Juguetes</option>
 <option value="repuestos">Repuestos</option>
 <option value="otro">Otro</option>

</select>
            </div>
        </div>
    </div>

    <hr>
    <div class="insert">
        <p>hola</p>
    </div>

有什么提示吗？

Answer 1

您可能最好使用 $(".insert").html() 而不是 $(".insert").replace() 所以你只是切换了 div 的内部结构。