jQuery动态表单显示在select选项上
jQuery dynamic form display on select option
我使用下面的jQuery函数来显示在选择框中选择值的特定形式。
<script>
$("#selectCategory").on("change", function() {
$("#" + $(this).val()).show();
})
</script>
select选项值与表单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" >
我希望这是可以理解的!
试试这个:
<script>
$("#selectCategory").on("change", function() {
$("form").hide();
$("#" + $(this).val()).show();
})
</script>
首先你需要隐藏表单,然后显示你想要的表单。
在您的情况下,您只显示表单意味着每次都会显示一个表单并将其附加到另一个表单中。
您应该隐藏其他表单,然后。。。
<script>
$("#selectCategory").on("change", function() {
$("form").hide(); //Hide all forms first
$("#" + $(this).val()).show(); //Show only what you want
})
</script>
希望这能帮助。。。
解决方案
你可以先隐藏所有其他表单,然后在事件发生后只显示特定的目标表单,如下所示:
<script type="text/javascript">
$("#selectCategory").on("change", function() {
$("form").hide();
$("#" + $(this).val()).show();
});
</script>
$("#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>
看看这个解决方案:
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;
}
希望它能有所帮助!
相关文章:
- 根据select选项元素将表单重定向到不同的URL
- jQuery动态表单显示在select选项上
- 如何在触发事件后选择select选项
- jQuery:根据select选项中的每页项目进行分页
- 使用JavaScript删除多个select选项
- 使用select选项转换时间.使用javascript
- 使用angularjs解析JSON,并选择select选项
- 使用jQuery在select选项上设置HTML数据属性
- 如何防止onclick事件在select选项中触发
- 如何在angular js中的select选项中获取所选项目id
- ng-select 选项在与自定义指令一起使用时加倍
- jQuery未能将JSON数据附加为select选项
- 如何将html中select选项的输入与javascript一起使用
- 使用VueJs获取Select选项文本
- 从jquery中的select选项添加两个不同的数组值(text&value)
- select选项在angularjs中不显示
- jQuery v 1.1x更改select选项的值
- 将select选项添加到id中
- 基于select选项的javascript动态表单生成
- Select选项包含在验证模型MVC时不起作用