使用 jQuery 动态创建选择框
Create select box dynamically with jQuery
我正在根据我需要的场景创建一个动态下拉列表。 我想知道在单击提交按钮后加载页面时如何动态保留这些添加的下拉列表的状态。
我能够在 jQuery 中窃取一个变量并检查表单是否已提交,以及是否提交以加载以前动态添加的下拉列表(HTML 选择框),但即使我将它们加载回来,我仍然遇到获取这些动态下拉列表的先前选择的值的问题。
我创造了一个小提琴手。http://jsfiddle.net/jBJSw/8/
我的表格
<form>
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<label>Textbox #1 :</label>
<input type="text" id="textbox1">
</div>
</div>
<input type="button" value="Add Button" id="addButton">
<input type="submit" value="submit Button" id="subButton">
</form>
脚本
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
'<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
如果有任何帮助,可以找到在表单提交后获取以前选择的值的方法,我们将不胜感激。(这是必需的,因为当提交表单时有错误时,这些选定的值应该是相同的,但现在它会刷新并成为默认值。 同样在视图场景中,这也应该预加载)
您必须在
查询字符串或 post 标头中将所选值从服务器端发送回页面。 然后在 jQuery 中根据发回的值相应地选择该选项。
抱歉迟到了,我的工作有麻烦。这是针对您的问题的可能解决方案。
多姆:
<form id="myform" method="post"> <!--adding id attribute-->
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<label>Textbox #1 :</label>
<input type="text" id="textbox1">
</div>
<!--check if POST is established-->
<?php if($_POST): ?>
<?php if(count($_POST['mySelect']) < 0 ): ?>
<?php
//Recreate your select DOM
$arr = $_POST['mySelect'];
foreach($arr as $ind => $val){
echo '<select>';
echo '<option val="val" ' . ($val == "val" ? "selected" : "") . '>desc2</option>';
echo '<option val="val2" ' . ($val == "val2" ? "selected" : "") . '>desc</option>';
echo '<option val="val3" ' . ($val == "val3" ? "selected" : "") . '>desc3</option>';
echo '</select>';
}
?>
<?php endif; ?>
<?php endif; ?>
</div>
<input type="button" value="Add Button" id="addButton">
<input type="submit" value="submit Button" id="subButton">
</form>
脚本:
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
'<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
//adding hidden inputs
$('#myFORM').on('submit', function(){
$('#myFORM select').each(function(){
slct = $('<input type="hidden" name="mySelect[]" value="' + $(this).val() +'">');
$('#myFORM').append(slct);
});
});
});
相关文章:
- 在动态创建的元素上获取对特定选择器的引用
- JQuery对动态创建的对象进行选择
- Jquerymobile-使用javascript创建选择菜单
- 动态添加通过json创建的选择项
- 从动态创建的html选择中选择所选选项
- 如何动态创建许多Jquery颜色选择器(eyecon)
- 创建时选择Nav大写字母
- jQuery选择器不识别任何动态创建的HTML输入函数
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 如何根据电子邮件模板名称的选择创建依赖的同义词文本区域
- jQuery根据下拉菜单中的选择创建和删除字段
- 基于复选框选择创建元素
- 选中下拉列表并基于该选择创建 if 语句
- 基于选择创建动态选择表单
- 选择创建DOM元素还是在javascript中使用HTML生成控件
- 引导选择:无法使用引导选择创建一个简单的选择框
- jQuery选项卡-选择创建内容面板的位置
- 仍然无法从javascript中选择创建的元素
- KnockoutJs:基于下拉选择创建复选框列表
- 在AJAX/Javascript/HTML中基于下拉选择创建表单的问题