关于jquery动态创建easyui下拉框控件
我一步步来html代码<divstyle="margin:10px;"id="divSear1"><inputtype="text"id="Select1"name="d...
我一步步来
html代码
<div style="margin: 10px;" id="divSear1">
<input type="text" id="Select1" name="dept1" value="" class="easyui-combobox" />
<input type="text" id="searValue1" name="searName1" class="easyui-validatebox"
data-options="required:true">
</div>
JS代码
$(function(){
var num=1;
//首先是下拉框数据
var data=[{ "id":1, "text":"text1"},
{ "id":2, "text":"text2"}]
//绑定第一个下拉框
$('#Select1').combobox({
data: dataValue,
required: true,
valueField: 'fields',
textField: 'title'
});
开始动态创建元素
$('#btnAdd').click(function () {
num++;//克隆后标记不同属性
//进行元素克隆,比更改克隆后主div的属性
$("#divSear1").clone(true).attr("id", "divSear" + num).appendTo("#QueryInput");
//更改combobox属性
$("#divSear" + num).find("input[name='dept1']").attr("id", "Select" + num).attr("name", "dept" + num);
//更改input属性
$("#divSear" + num).find("input[name='searName1']").attr("id", "searValue" + num).attr("name", "searName" + num);
});
});
第一个下拉框是有数据的,但是当点击添加栏位之后,
点击第二个下拉框展开,它会自动跳到第一个下拉框,并展开第一个!也就是说控件克隆了,但是控件的事件与数据没克隆过去 展开
html代码
<div style="margin: 10px;" id="divSear1">
<input type="text" id="Select1" name="dept1" value="" class="easyui-combobox" />
<input type="text" id="searValue1" name="searName1" class="easyui-validatebox"
data-options="required:true">
</div>
JS代码
$(function(){
var num=1;
//首先是下拉框数据
var data=[{ "id":1, "text":"text1"},
{ "id":2, "text":"text2"}]
//绑定第一个下拉框
$('#Select1').combobox({
data: dataValue,
required: true,
valueField: 'fields',
textField: 'title'
});
开始动态创建元素
$('#btnAdd').click(function () {
num++;//克隆后标记不同属性
//进行元素克隆,比更改克隆后主div的属性
$("#divSear1").clone(true).attr("id", "divSear" + num).appendTo("#QueryInput");
//更改combobox属性
$("#divSear" + num).find("input[name='dept1']").attr("id", "Select" + num).attr("name", "dept" + num);
//更改input属性
$("#divSear" + num).find("input[name='searName1']").attr("id", "searValue" + num).attr("name", "searName" + num);
});
});
第一个下拉框是有数据的,但是当点击添加栏位之后,
点击第二个下拉框展开,它会自动跳到第一个下拉框,并展开第一个!也就是说控件克隆了,但是控件的事件与数据没克隆过去 展开
1个回答
展开全部
textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,这个是jquery的一个bug,网上有一个插件,下载地址如下:https://github.com/spencertipping/jquery.fix.clone/blob/master/jquery.fix.clone.js。就是在clone的时候将val再重新赋值一下,也可以不用这个插件,自己写。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询