Question

我想使用<select</select>命名分类制作一个下拉列表，它有2个表单，Resident和Business。如果用户选择“居民”选项，则在单击第一个选项后将显示一个表单，如果用户选择“业务”表单，则会显示另一个表单。

我从互联网上找到了这段代码：

<select>
    <option value="" selected="selected"></option>
    <option value="form_1">Form 1</option>
    <option value="form_2">Form 2</option>
</select>

<form name="form_1" id="form_1" style="display:none">
    <input type="text" value="1">
</form>

<form name="form_2" id="form_2" style="display:none">
    <input type="text" value="2">
</form>

JS：

$("select").on("change", function() {    
    $("#" + $(this).val()).show().siblings();
});

我的问题是我想要显示每个表单。例如，用户选择Resident only Resident表单将显示，另一个表单将被隐藏。

希望你能解决我的问题在此先感谢（抱歉英语不好）

Answer 1

选择forms中的所有dom，然后排除要显示的form和hide。然后显示要显示的form。

尝试，

$("select").on("change", function() {    
  $('form').not("#" + $(this).val()).hide();
  $("#" + $(this).val()).show();
});

Answer 2

您可以尝试这样的事情

if( "#" + $(this).val() == 'form_1' ){
    $("#form_1").show();
    $("#form_2").hide();
}
else {
    $("#form_1").hide();
    $("#form_2").show();
}

Answer 3

$("select").on("change", function() {    
  $(this).siblings('form:visible').hide(); // if blank option selected, all form will should be hide
  $("#" + $(this).val()).show();
});

选择一个选项后，显示每个表单并隐藏其他表单

3 个答案: