Question

我想在选择一个选项时显示一个文本框，当稍后选择另一个选项时，DIV应该更改为选择。

这是我的代码，但在选择之后不会返回文本框：

<select name="type">
<option value="plane">Plane</option>
<option value="car">Car</option>
</select>
<input class="hideme" type="text" name="name">


$('select').change(
  function(){
    if ($(this).val()=="car") $('.hideme').show();
    else $('.hideme').replaceWith('<select><option>a</option></select>');
  }
).change();

Answer 1

定义您想要显示的选择并将其css设置为隐藏。这样你的jquery就会像这样

 $('select').change(function(){
    if($(this).val()=="car")
    $('.hideme').show();
 else
    $('.hideme').css('display', 'none');
    $('.hiddenSelect').css('display','block');
});

Answer 2

用

替换文本框

<div id="container"></div>

，你的javascript应该是这样的

$('select').change(function () {
$("#container").html("");
if ($(this).val() == "car"){
    $("#container").html("<input type='text' name='name'>");
}
else{
     $("#container").html("<select><option>a</option></select>");
}

Answer 3

由于您使用select完全替换代码，代码将无法执行您想要的操作。所以下次你打电话时，没有hideme的课程。这样做：

$('select').change(function(){
  if($(this).val()=="car")
   $('.hideme').replaceWith("<input class='hideme' type='text' name='name'>");
  else
   $('.hideme').replaceWith('<select class="hideme"><option>a</option></select>');
}).change();

Answer 4

你的else块用另一个select标签替换“hideme”元素。再次显示它将不会导致任何变化。

为select标签保留一个单独的div，以显示另一个div，以显示要显示的文本

选择更改DIV内容

4 个答案: