Question

我遇到以下代码问题：

<form id="form_shower">
                <select id="myselect">
                    <option value="" selected="selected"></option>
                    <option value="form_name1">Remove the Association</option>
                    <option value="form_name2">Copy and associate to new form group</option>
                    <option value="form_name3">Maintain the old association</option>
                </select>
            </form>

            <form name="form_name1" id="form_name1" style="display:none">
                Do stuff that removes the association!
            </form>

            <form name="form_name2" id="form_name2" style="display:none">
                New Internal Form Name: <input type="text" name="newinternalformname" value="">
            </form>

            <form name="form_name3" id="form_name3" style="display:none">
                Do stuff to maintain the old association!
            </form>
<script>
    $("#myselect").on("change", function () {
        $("#" + $(this).val()).show().siblings();
    })
</script>

基本上，当我从下拉列表中选择其中一个选项时，我得到了我想要的东西（截至目前它只是测试文本）但是当我从列表中选择一个新选项时，它会附加数据而不是摆脱与先前选择的选项之一相关联的内容。

Answer 1

这是因为包含下拉列表的表单也是您正在显示的表单的兄弟。您还有嵌套表单which is not allowed

// The first one in this set is always the form with the dropdown
$("#" + $(this).val()).show().siblings()

我会做以下

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_shower">
   <select id="myselect">
     <option value="" selected="selected"></option>
     <option value="form_name1">Remove the Association</option>
     <option value="form_name2">Copy and associate to new form group</option>
     <option value="form_name3">Maintain the old association</option>
   </select>
</form>
<form class="show-hide" name="form_name1" id="form_name1" style="display:none">
Do stuff that removes the association!
</form>

<form class="show-hide" name="form_name2" id="form_name2" style="display:none">
New Internal Form Name: <input type="text" name="newinternalformname" value="">
</form>

<form class="show-hide" name="form_name3" id="form_name3" style="display:none">
Do stuff to maintain the old association!
</form>

＆＃13;

HTML下拉列表问题

1 个答案: