选择框更改后Jquery更改html

Jquery change html after select box changes

本文关键字：Jquery 更改 html 选择      更新时间：2023-09-26

我有下面的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>

有什么提示吗？

您最好使用$(".insert").html()而不是$(".insert").replace()，这样您就可以切换出div的内部。

replaceWith函数用新的HTML替换元素。因此，在那之后，您将无法再选择它，因为您使用的HTML没有insert类。我想你想要这样的函数html：

$(".insert").html( YOUR_HTML);

相关文章：