选择选项上的jQuery动态表单显示答案

【问题标题】：jQuery dynamic form display on select option选择选项上的jQuery动态表单显示
【发布时间】：2015-06-14 17:18:12
【问题描述】：

我正在使用以下 jQuery 函数来显示在选择框中选择值时的特定表单。

<script>
$("#selectCategory").on("change", function() {
    $("#" + $(this).val()).show();
})
</script>

选择选项值与表单 id 匹配。我面临的问题是，在第一个 onchange 事件中，代码工作正常。但是在随后的 onchange 事件中，新表单会附加到现有表单上。例如，如果我选择#xyz 选项，则会呈现#xyz 表单。但是现在如果我将选择选项更改为#abc，#abc 表单将附加到#xyz 表单。

如果用户更改了他的选择，则应删除原始表单，然后呈现新表单。例如，如果我在选择#xyz选项后选择#abc选项，则#xyz表单应该被删除，#abc表单应该显示在它的位置。

<select id="selectCategory" name="category" style="width:100%;" tabindex="1">
        <option value=""></option>
        <option value="book">Textbooks/Course Material</option>
        <option value="compexam">Entrance Exam Books</option>
</select>

<form class="upload" id="book" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none">
<form class="upload" id="compexam" onsubmit="return checkUpload();" action="" method="POST" enctype="multipart/form-data" style="display:none" >

我希望这是可以理解的！

【问题讨论】：

标签： javascript jquery forms onchange

【解决方案1】：

试试这个：

<script>
$("#selectCategory").on("change", function() {
    $("form").hide();
    $("#" + $(this).val()).show();
})
</script>

首先你需要隐藏表单，然后显示你想要的表单。

在您的情况下，您只显示表单意味着每次显示一个表单并附加另一个表单。

【讨论】：

谢谢！不知道为什么我没有想到！

【解决方案2】：

你应该隐藏其他表单然后......

<script>
$("#selectCategory").on("change", function() {
    $("form").hide(); //Hide all forms first
    $("#" + $(this).val()).show(); //Show only what you want
})
</script>

希望这会有所帮助...

【讨论】：

谢谢！不知道为什么我没有想到！

【解决方案3】：

解决方案

您可以先隐藏所有其他表单，然后在事件之后仅显示特定的目标表单，如下所示：

<script type="text/javascript">
    $("#selectCategory").on("change", function() {
        $("form").hide();
        $("#" + $(this).val()).show();
    });
</script>

【讨论】：

谢谢！不知道为什么我没有想到！
没问题！如果您在同一页面中有其他类型的表单，您还可以向表单添加一个类

【解决方案4】：

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

div {
  width: 40px;
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="showable" id="div1" style="background-color: #f00; display: none;"></div>
<div class="showable" id="div2" style="background-color: #0f0; display: none;"></div>
<div class="showable" id="div3" style="background-color: #00f; display: none;"></div>
<br>
<select id="selectCategory">
  <option value="">-- please choose --</option>
  <option value="div1">Red</option>
  <option value="div2">Green</option>
  <option value="div3">Blue</option>
</select>

【讨论】：

【解决方案5】：

看看这个解决方案：

https://jsfiddle.net/g2cdygd0/

JS：

$("#selectCategory").on("change", function() {
    $('.formShownBySelect').hide();
    $("#" + $(this).val()).show();
});

HTML：

<select id="selectCategory">
     <option value="xyz">XYZ</option>
     <option value="abc">ABC</option>
</select>

<form id="xyz" class="formShownBySelect">
     <label>I'm form XYZ</label>
</form>

<form id="abc" class="formShownBySelect">
    <label>I'm form ABC</label>
</form>

CSS：

#xyz, #abc {
     display: none;
}

希望对你有帮助！

【讨论】：