动态添加新的组合(选择)框
Dynamically add new combo (select) box
在我的页面中,我有一个带有添加按钮的组合框。单击添加按钮时,如何在原始组合框下方创建新的组合框?如果再次单击,它将生成另一个组合框。每个组合框中的值是从数据库中调用的。
这是一个示例,尽管您必须自己计算中间层和后端部分。
示例:http://jsfiddle.net/9hvbt/3/
JavaScript
$('#btnAdd').click(function(){
//Use Ajax to talk to your server (middle tier)
$.ajax({
url: '/echo/json/', //Replace with your URL to return Database data (JSON format)
dataType: 'json',
type: 'get',
success: function(data){
//Use the returned data to pass into CreateDropDown (Hard coded for an example)
CreateDropDown(["Item 1", "Item 2", "Item 3"]);
}
});
});
function CreateDropDown(data){
var $newSelect = $('<select />');
$.each(data, function(i, val){
$newSelect.append($('<option />', {
'text':val
}));
});
$newSelect.appendTo('#dropDowns');
}
.HTML
<div id='dropDowns'>
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</div>
<input type='button' id='btnAdd' value="Add" />
编辑
你还应该阅读jQuery的AJAX方法
jquery有什么想法吗? jquery clone() 将帮助您解决此问题
JQuery .clone()
一个活生生的例子:
http://jsfiddle.net/laupkram/6LBNs/在你的问题的情况下,尝试研究这个
使用 jQuery 和 Ajax 动态加载 ComboBox
相关文章:
- 复选框选择组合
- 多个和单个选择/组合框的逻辑
- 在jquery mobile中动态选择组合框
- 从选择/组合 JavaScript 中删除节点
- 选择组合框值
- Angularjs :从列表中选择组合
- 选择组合框后显示复选框
- 编程岩石,纸张,剪刀的选择组合-Javascript
- 将数据输入和下拉选择组合到js中
- 从外部CSV文件填充选择组合框表单
- 角材质链通过从数组中选择组合,形成输入数组
- 根据文本自动选择组合框中的值
- 将输入和选择组合到一个可见的输入字段中
- ExtJS多选择组合框
- Ajax加载复选框后选择组合框- php
- 我如何在html页面中创建日期选择组合框
- 如何选择组合值,点击进入
- 选择组合框数据后的动态文本字段(编码器)
- 如何计算所有可能的选择组合
- 选择组合框值并通过隐藏字段将其发送到下一页