求问,如何做一个二级联动的下拉表单(select),每点击一下按钮,表单增加一行。

求问,如何做一个二级联动的下拉表单(select),每点击一下按钮,表单增加一行。我现在的问题是,表单增加后,二级联动就没有效果了。

这是html和表单元素代码
<!DOCTYPE html>







厚度 光度 外观

增加一行
删除一行

<br> $(function() { <br> $(&quot;#city_5&quot;).citySelect({<br> url: {&quot;citylist&quot;: [<br> {&quot;p&quot;: &quot;前端课程&quot;, &quot;c&quot;: [{&quot;n&quot;: &quot;HTML5&quot;}, {&quot;n&quot;: &quot;CSS3&quot;, &quot;a&quot;: [{&quot;s&quot;: &quot;HTML&quot;}, {&quot;s&quot;: &quot;AJAX&quot;}]}, {&quot;n&quot;: &quot;JSON&quot;}]},<br> {&quot;p&quot;: &quot;编程语言&quot;, &quot;c&quot;: [{&quot;n&quot;: &quot;C&quot;}, {&quot;n&quot;: &quot;C++&quot;}, {&quot;n&quot;: &quot;Python&quot;}, {&quot;n&quot;: &quot;PHP&quot;}, {&quot;n&quot;: &quot;JAVA&quot;}]},<br> {&quot;p&quot;: &quot;数据库&quot;, &quot;c&quot;: [{&quot;n&quot;: &quot;Mysql&quot;}, {&quot;n&quot;: &quot;SqlServer&quot;}, {&quot;n&quot;: &quot;Oracle&quot;}, {&quot;n&quot;: &quot;Mssql&quot;}]},<br> ]},<br> prov: &quot;&quot;,<br> city: &quot;&quot;,<br> dist: &quot;&quot;,<br> nodata: &quot;none&quot;<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);

0

1个回答

新增后的表单,绑定的事件并没有在dom上触发,联动没有效果。建议,使用事件委托,这样科避免动态增加的dom上事件不触发的问题

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!