求问,如何做一个二级联动的下拉表单(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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
实现页面点击就增加一行,并且每行数据有二级级联
实现页面点击就增加一行,并且每行数据有二级级联,有些部分是参考网上的知识,并在基础上有些调整。工作中遇到的问题,记录一下。首先上关键的页面代码:&amp;lt;table class=&quot;m-table1&quot;&amp;gt; &amp;lt;colgroup&amp;gt; &amp;lt;col width=&quot;15%&quot;/&amp;gt; &amp;lt;col width=&quot;17%&quot;/&
vue 点击增加按钮增加一行下拉框,绑定下拉框值,点击删除按按钮删除对应行
&amp;lt;div&amp;gt; &amp;lt;div&amp;gt; &amp;lt;el-select class=&quot;el-select&quot; v-model=&quot;form.label&quot; placeholder=&quot;全部&quot; clearable filterable&amp;gt; &amp;lt;el-option v-for=&quot;item in addList&qu
点击按钮增加一行表格
点击按钮增加一行表格 做此功能我们要用到两个方法: insertRow(): insertRow() 方法用于在表格中的指定位置插入一个新行。 insertCell() :insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 元素。 <%@ page language="java" contentType="text/html; char
表格点击按钮添加和删除一行,添加和删除一列
html代码:       jquery代码,记得引文件路径: /**  * 编辑表格  */ var editTable = { /** * 新增一行 */ addRow:function(){ $mtr = $("#amsTbody tr:last").clone(); $mtr.each(func
一个增加表单input的例子/表单框按需求点击增加
报名时候不确定报名人数,姓名表单默认只有一个,可自主添加表单。大概就是这个意思吧
点击一按钮表结构就增加一行--js代码
在做jsp开发时很容易要常用到JavaScript脚本编写控制表单,曾也为上面的情况犯愁过,看到了这个豁然开朗,有益共享
通过按钮重置表单时select的处理
    html:                            &amp;lt;select  id=&quot;VipSource&quot; name=&quot;VipSource&quot;  data-placeholder=&quot;会员来源&quot; &amp;gt;  &amp;lt;option value=&quot;&quot;&amp;gt;--全部--&amp;lt;/option&amp;gt; &amp;lt;option value=&quot;1&
下拉表单项的二级联动及回显
实体类: //员工类 public class CrmStaff { private String staffId; private String loginName; private String loginPwd; private String staffName; private String gender; private Date onDutyDate; private...
添加可动态变化的输入框,点击添加增加一行,点击删除删除一行
1.添加一个div 2.添加js方法: var a = 0; //添加一行 function addNewLine(){ ++a; var tar = " "; tar += " "; tar += " *"; tar += " 工程代码:"; tar += " "; tar += " *"; tar += " 工程名称:"; tar += " ";
表单验证 二级联动 添加 删除
charset="utf-8" />   模拟   src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8">       action="#" id="f">   用户名: type="text" id="username
vue实现下拉表单二级联动
&amp;lt;!--一级菜单--&amp;gt; &amp;lt;select name=&quot;province&quot; id=&quot;province&quot; class=&quot;classify&quot; v-on:change=&quot;indexSelect01&quot; v-model=&quot;indexId&quot;&amp;gt; &amp;lt;option value=&quot;选择一级菜单&quot;&amp;gt;选择一级菜单&amp;lt;
JSP动态生成,点击添加表单table行-01(点击添加的时候会提交数据给ACTION)
iIndex = 1; var annex = 1; function getIndex(){ iIndex = event.srcElement.parentElement.parentElement.rowIndex; return iIndex; } function insertRow(iPos){ var otr=myTable.inse
Flask 利用AJAX异步实现二级(甚至多级)下拉表单级联 --记录那些坑
首先我是用的WTForms生成的表单,我也用input标签写过,感觉不整洁,就弃用了,这里我以学院school、系department、团队team,这三级关系做介绍。(和省,市,区一样) 下面的Form类的定义(数据库定义就不给出了,这里使用SQLalchemy查询语言): class RegisterForm(FlaskForm): #注意这样定义school就是表单id,下面也一样 ...
在Django下使用Jquery ajax实现select表单的二级联动
在Django下使用Jquery ajax实现select表单的二级联动 采用Django+Jquery实现: 网上也看到很多例子,综合很多例子,经过尝试,实现一个简单的省市二级联动,记下来,以免忘记,有考虑不严谨的地方还请大家指正:首先是模型设计(数据库设计):# coding:utf-8 from django.db import models# Create your models her
JS+HTML简单实现表单二级联动效果
表单选择栏二级联动 前言:表单的二级联动不可谓不重要,根据第一个选择栏的内容更改下一个选择栏的整体内容在一些场景下是必要的,所以今天以省市为例子利用JS+HTML实现简单的二级联动效果,仅做参考。   首先我们思考一下二级表单的产生都需要什么条件 以前一个选择栏的内容作为展现下一个选择栏的内容的标识,首先第一个选择栏的内容是一部分数据,下一个选择栏的内容是另一部分数据,并且第一部分数据应该...
DIV+CSS+JS仿Select下拉表单
DIV+CSS+JS仿Select下拉表单 下拉表单
Jquery -点击按钮添加一条新纪录或者删除,并实现Yii2自带的验证
2018-04-23今天需要对work、family、education 页面进行调整,实现点击按钮添加一条新纪录或者删除。此功能需要用到JS,为了方便我选择了JQuery。使用hide()和show()方法实现。(应该有很多方法,后期我再添加进来,现在js小白的我,只能想到隐藏和显示)我的代码实现如下:jquery// work 第一个添加 $(&quot;#workAdd1&quot;).click( fu...
Django web开发中的二级联动select 列表的简单实现方法
因给单位行行政部门开发一个《文具管理系统》需要在管理端的入库和员工的领用端实现按文具分类查找出相应的文具,在页面上放了二个select, 第一个select 列出文具分类, 第二个select根据第一个select的分类列出相应的文具。 一, models.py class stat_type(models.Model): name = models.CharField(max_l...
bootstrap表格的每一行添加一个按钮事件
1.在列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate',
js动态表格添加一行删除一行保存一行
js动态表格添加一行删除一行保存一行
flutter之表单组件
表单是一个包含表单元素的区域。表单元素允许用户输入内容,比如:文本域、下拉列表、单选框、复选框等。常见的应用场景有:登录、注册、输入信息等。表单里有两个重要的组件,一个是Form组件用来做整个表单提交使用的,另一个是TextFormFiled组件用来做用户输入的。 Form组件的属性 key:组件在整个Widget树中的key值 autovalidate:是否自动提交表单 child:组件...
layui点击按钮添加可编辑的一行
layui添加一行,并且进行单元格编辑
EasyUI中点击添加按钮进行表格添加,append
第一步: 添加一个按钮 &amp;lt;a href=&quot;#&quot; icon=&quot;icon-add&quot; class=&quot;easyui-linkbutton&quot; id=&quot;btnCreate&quot; plain=&quot;true&quot; &amp;gt;添加入库货品&amp;lt;/a&amp;gt;第二部:为按钮绑定事件 var num=1; $('#btnCreate').click(function () {
html表单 select多选下拉箭头的问题
开发中碰到 需要使用表单多选标签select,但是需求是自带酷炫的外框,而且下拉箭头不能用原生的。首先是初始化select标签,清除原生的边框样式:border:none;outline-style:none;去掉原生箭头然后模拟箭头 {appearance:none; -moz-appearance:none; -webkit-appearance:none;},一般需要加上前缀,有兼
vue 点击按钮增加一行
data() { return { customized_descs: [1], } },不要js,jq里面的方法了。。。
使用antd开发可动态增加项的表单
我不知道应该怎么描述这个功能才算清晰,看图吧 环境是在antd的Form组件内开发大概的功能如下: 用户需要选择异常情况通知方式,并填写最少一个最多三个的联系人姓名和联系方式。 期望用户点击加号,可以增加一条,最多三条。 内容需校验,输入不能为空,联系方式需要根据用户勾选的通知方式校验输入内容,即用户勾选短信时,联系方式校验规则为手机号,勾选邮件时,校验方式为邮箱。 输入部分的数据结构应...
根据select下拉框选择的值,向form表单添加所要显示的内容的方法
form表单                  跟单结果                              <select name="Ext_WithResult" id="Ext_WithResult" onchange="change(this)" class="select Regional">  //绑定onchange操作
说说layui的form中的二级联动select注意点
【1.加载layui框架】 这个请移驾 https://www.layui.com 不多讲。 【2.举个例子】 //先给出html代码 &lt;form action='' method='post' class='layui-form'&gt; //这个是一级 &lt;div class="layui-input-inline"&gt; &lt;select class="lay...
layui 实现点击按钮添加一行(方法渲染创建的table)
目标:layui 实现点击按钮添加一行解决方案:方案1、table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个 标签;方案2、table 是用方法渲染的方式创建的,写一个button,每次点击按钮,加载数据时添加一个Object; 之前我试过用方案1 来实现该功能,发现这个方案,代码量极大,最困难的地方就是在中加样式,特别是table中有很多种控件时,样式的添加非
javascript二级联动表单
javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单
layui 点击按钮添加表单
&amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt;     &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;     &amp;lt;meta name=&quot;viewport&quot;           content=&quot;width=device-width, user-scalable=no, initial-
button按钮通过JSP给table添加下拉列表
本文件是一个简单的示例,通过点击html中的button按钮,结合jsp,给table中添加下拉列表,希望能够帮到可以用到的人。         代码如下: html> lang="en"> charset="UTF-8"> 餐饮类别设置 name="mealtypesetform" id="mealtypesetform" action="http://w
HTML------下拉菜单与文字域
用于绑定一个表单元素,当点击了label标签,被绑定的 表单元素会自动跳转到需要输入的位置 for属性规定label与那个表单绑定 &amp;lt;label for=&quot;male&quot;&amp;gt;male&amp;lt;/label&amp;gt; &amp;lt;input type=&quot;radio&quot; name= &quot;sex&quot; id= &quot;male&quot; value= &quot;male&quot; /&amp;gt;
table表格每一行增加和删除功能,增加是指在当前行后面,删除是删除当前行
function insertAfter(newElement,targetElement){    var parent = targetElement.parentNode;    if(parent.lastChild == targetElement){        parent.appendChild(newElement);    }else{        parent.inser...
《Flask Web应用结合AJAX技术实现页面中多级表单联动》—人生苦短,我用python(九)
写在前面: 近期,博主通过Flask Web框架,利用python语言实现多线程ping,数据库采用SQLite实现了针对IP地址管理功能的初步实现。应用整体框架如下: 在应用中,希望能够实现IP地址的使用登记,这时需要在前台页面中实现根据一级菜单选择的内容,动态关联出二级菜单可以选择的内容。 其中一级菜单的内容是通过在数据库轮询得到的,二级菜单的内容对应的需要根据一级菜单选择的内容作为...
form表单中删除、增加tr
需求:通过点击添加、删除按钮能够增加或删除一行 思路:先写出一行tr,将此tr内的html追加到容器中,实现添加功能 页面代码: <div class="easyui-panel" title="商品信息" data-options="collapsible:true" style="width:99%;height:auto;padding:10px;">
html下拉框之间的联动------一级分类和二级分类
html/js代码如下: 湖北 广东 黄冈 武汉 function change() { var x = document.getElementById("first"); var y = document.getElementById("second"); y.options.length = 0; // 清除second下拉框的
表格,点击添加,将表单中的数据添加进入表格最后一行 表格最后一列增加删除按钮,点击按钮,删除当前行
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; table {
通过点击添加按钮即可自动添加一行点击删除即可自动删除一行
通过点击添加按按钮即可自动添加一行,通过点击删除按钮即可自动删除一行。这个是一个很好的例子。代码简洁,用javasript实现的。
jQuery实现省份城市下拉菜单二级联动
先写上html代码 &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;select name=&quot;province&quot; id=&quot;province&quot;&amp;gt; &amp;lt;/select&amp;gt; &amp;lt;select name=&quot;city&quot; id=&quot;city&quot;&amp;gt; &amp;l