javascript - 根据输入显示表单？

Question

很难根据从下拉菜单中选择的输入来显示某种形式。这是我当前的代码，它似乎不起作用。

HTML

<form id="form-shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>

<form name="form_name1" id="form_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>

<form name="form_name2" id="form_name2" style="display:none">
<!---- THIS IS FORM 2---->
</form>

<form name="form_name3" id="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>

JS:

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

Answer 1

我会用 div 包装表单并使用类和 id 进行处理:

<form id="form-shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>
<div id="form_name1" class="forms">
<form name="form_name1" style="display:none">
<!---- THIS IS FORM 1---->
</form>
</div>

<div id="form_name2" class="forms">
<form name="form_name2" style="display:none">
<!---- THIS IS FORM 2---->
</form>
</div>

<div id="form_name3" class="forms">
<form name="form_name3" style="display:none">
<!---- THIS IS FORM 3---->
</form>
</div>

JS:

$("#myselect").on("change", function() {
    var selected = $(this).val();
    $(".forms").hide();
    $("#" + selected).show();
})