求问,如何做一个二级联动的下拉表单(select),每点击一下按钮,表单增加一行。我现在的问题是,表单增加后,二级联动就没有效果了。
这是html和表单元素代码
<!DOCTYPE html>
厚度 | 光度 | 外观 |
---|---|---|
|
增加一行
删除一行
<br> $(function() { <br> $("#city_5").citySelect({<br> url: {"citylist": [<br> {"p": "前端课程", "c": [{"n": "HTML5"}, {"n": "CSS3", "a": [{"s": "HTML"}, {"s": "AJAX"}]}, {"n": "JSON"}]},<br> {"p": "编程语言", "c": [{"n": "C"}, {"n": "C++"}, {"n": "Python"}, {"n": "PHP"}, {"n": "JAVA"}]},<br> {"p": "数据库", "c": [{"n": "Mysql"}, {"n": "SqlServer"}, {"n": "Oracle"}, {"n": "Mssql"}]},<br> ]},<br> prov: "",<br> city: "",<br> dist: "",<br> nodata: "none"<br> }); <br> });<br>
这是增加一行的代码
var i = 1;
$(".td").each(function(){
$(this).html(i++);
})
function fun(){
var $td = $("#a").clone(); //增加一行,克隆第一个对象
$(".table").append($td);
var i = 1;
$(".td").each(function(){ //增加一行后重新更新序号1,2,3......
$(this).html(i++);
})
$("table tr:last").find(":input").val(''); //将尾行元素克隆来的保存的值清空
}
function del(){
$("table tr:not(:first):not(:first):last").remove(); //移除最后一行,并且保留前两行
}
这是二级联动代码
/*
Ajax 三级省市联动
http://code.ciaoca.cn/
日期:2012-7-18
settings 参数说明
url:省市数据josn文件路径
prov:默认省份
city:默认城市
dist:默认地区(县)
nodata:无数据状态
required:必选项
------------------------------ */
(function($) {
$.fn.citySelect = function(settings) {
if (this.length < 1) {
return;
}
;
// 默认值
settings = $.extend({
url: "city.min.js",
prov: null,
city: null,
dist: null,
nodata: null,
required: true
}, settings);
var box_obj = this;
var prov_obj = box_obj.find(".prov");
var city_obj = box_obj.find(".city");
var dist_obj = box_obj.find(".dist");
var prov_val = settings.prov;
var city_val = settings.city;
var dist_val = settings.dist;
var select_prehtml = (settings.required) ? "" : "<option value=''>请选择</option>";
var city_json;
// 赋值市级函数
var cityStart = function() {
var prov_id = prov_obj.get(0).selectedIndex;
if (!settings.required) {
prov_id--;
}
;
city_obj.empty().attr("disabled", true);
dist_obj.empty().attr("disabled", true);
if (prov_id < 0 || typeof (city_json.citylist[prov_id].c) == "undefined") {
if (settings.nodata == "none") {
city_obj.css("display", "none");
dist_obj.css("display", "none");
} else if (settings.nodata == "hidden") {
city_obj.css("visibility", "hidden");
dist_obj.css("visibility", "hidden");
}
;
return;
}
;
// 遍历赋值市级下拉列表
temp_html = select_prehtml;
$.each(city_json.citylist[prov_id].c, function(i, city) {
temp_html += "<option value='" + city.n + "'>" + city.n + "</option>";
});
city_obj.html(temp_html).attr("disabled", false).css({"display": "", "visibility": ""});
distStart();
};
// 赋值地区(县)函数
var distStart = function() {
var prov_id = prov_obj.get(0).selectedIndex;
var city_id = city_obj.get(0).selectedIndex;
if (!settings.required) {
prov_id--;
city_id--;
}
;
dist_obj.empty().attr("disabled", true);
if (prov_id < 0 || city_id < 0 || typeof (city_json.citylist[prov_id].c[city_id].a) == "undefined") {
if (settings.nodata == "none") {
dist_obj.css("display", "none");
} else if (settings.nodata == "hidden") {
dist_obj.css("visibility", "hidden");
}
;
return;
}
;
// 遍历赋值市级下拉列表
temp_html = select_prehtml;
$.each(city_json.citylist[prov_id].c[city_id].a, function(i, dist) {
temp_html += "<option value='" + dist.s + "'>" + dist.s + "</option>";
});
dist_obj.html(temp_html).attr("disabled", false).css({"display": "", "visibility": ""});
};
var init = function() {
// 遍历赋值省份下拉列表
temp_html = select_prehtml;
$.each(city_json.citylist, function(i, prov) {
temp_html += "<option value='" + prov.p + "'>" + prov.p + "</option>";
});
prov_obj.html(temp_html);
// 若有传入省份与市级的值,则选中。(setTimeout为兼容IE6而设置)
setTimeout(function() {
if (settings.prov != null) {
prov_obj.val(settings.prov);
cityStart();
setTimeout(function() {
if (settings.city != null) {
city_obj.val(settings.city);
distStart();
setTimeout(function() {
if (settings.dist != null) {
dist_obj.val(settings.dist);
}
;
}, 1);
}
;
}, 1);
}
;
}, 1);
// 选择省份时发生事件
prov_obj.bind("change", function() {
cityStart();
});
// 选择市级时发生事件
city_obj.bind("change", function() {
distStart();
});
};
// 设置省市json数据
if (typeof (settings.url) == "string") {
$.getJSON(settings.url, function(json) {
city_json = json;
init();
});
} else {
city_json = settings.url;
init();
}
;
};
})(jQuery);