求问,如何做一个二级联动的下拉表单(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;n &amp;lt;colgroup&amp;gt;n &amp;lt;col width=&quot;15%&quot;/&amp;gt;n &amp;lt;col width=&quot;17%&quot;/&
表格点击按钮添加和删除一行,添加和删除一列
html代码:rnrnrnrnrnrnrnrnrnrnrnrnrnrnrn     rnrnrnrnjquery代码,记得引文件路径:rnrn/**rn * 编辑表格rn */rnvar editTable = {rn/**rn* 新增一行rn*/rnaddRow:function(){rn$mtr = $("#amsTbody tr:last").clone();rn$mtr.each(func
添加可动态变化的输入框,点击添加增加一行,点击删除删除一行
1.添加一个divnnn2.添加js方法:nvar a = 0;n//添加一行n function addNewLine(){n ++a;n var tar = " ";n tar += " ";n n tar += " *";n tar += " 工程代码:";n tar += " ";n n tar += " *";n tar += " 工程名称:";n tar += " ";
vue 点击增加按钮增加一行下拉框,绑定下拉框值,点击删除按按钮删除对应行
&amp;lt;div&amp;gt;n &amp;lt;div&amp;gt;n &amp;lt;el-select class=&quot;el-select&quot; v-model=&quot;form.label&quot; placeholder=&quot;全部&quot; clearablen filterable&amp;gt;n &amp;lt;el-optionn v-for=&quot;item in addList&qu
点击一按钮表结构就增加一行--js代码
在做jsp开发时很容易要常用到JavaScript脚本编写控制表单,曾也为上面的情况犯愁过,看到了这个豁然开朗,有益共享
点击按钮增加一行表格
点击按钮增加一行表格n做此功能我们要用到两个方法:ninsertRow(): insertRow() 方法用于在表格中的指定位置插入一个新行。nnnninsertCell() :insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 元素。nnnn<%@ page language="java" contentType="text/html; char
在Django下使用Jquery ajax实现select表单的二级联动
在Django下使用Jquery ajax实现select表单的二级联动n 采用Django+Jquery实现:n网上也看到很多例子,综合很多例子,经过尝试,实现一个简单的省市二级联动,记下来,以免忘记,有考虑不严谨的地方还请大家指正:首先是模型设计(数据库设计):# coding:utf-8nfrom django.db import models# Create your models her
Flask 利用AJAX异步实现二级(甚至多级)下拉表单级联 --记录那些坑
首先我是用的WTForms生成的表单,我也用input标签写过,感觉不整洁,就弃用了,这里我以学院school、系department、团队team,这三级关系做介绍。(和省,市,区一样)n下面的Form类的定义(数据库定义就不给出了,这里使用SQLalchemy查询语言):nclass RegisterForm(FlaskForm):n#注意这样定义school就是表单id,下面也一样n ...
flutter之表单组件
表单是一个包含表单元素的区域。表单元素允许用户输入内容,比如:文本域、下拉列表、单选框、复选框等。常见的应用场景有:登录、注册、输入信息等。表单里有两个重要的组件,一个是Form组件用来做整个表单提交使用的,另一个是TextFormFiled组件用来做用户输入的。nnForm组件的属性nnkey:组件在整个Widget树中的key值nnautovalidate:是否自动提交表单nnchild:组件...
JSP动态生成,点击添加表单table行-01(点击添加的时候会提交数据给ACTION)
iIndex = 1;n var annex = 1;n function getIndex(){n iIndex = event.srcElement.parentElement.parentElement.rowIndex; n return iIndex;n }n function insertRow(iPos){n var otr=myTable.inse
通过点击添加按钮即可自动添加一行点击删除即可自动删除一行
通过点击添加按按钮即可自动添加一行,通过点击删除按钮即可自动删除一行。这个是一个很好的例子。代码简洁,用javasript实现的。
下拉表单项的二级联动及回显
实体类:n//员工类npublic class CrmStaff {n private String staffId;n private String loginName;n private String loginPwd;n private String staffName;n private String gender;n private Date onDutyDate;n n private...
通过按钮重置表单时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&
DIV+CSS+JS仿Select下拉表单
DIV+CSS+JS仿Select下拉表单 下拉表单
JS+HTML简单实现表单二级联动效果
表单选择栏二级联动nn前言:表单的二级联动不可谓不重要,根据第一个选择栏的内容更改下一个选择栏的整体内容在一些场景下是必要的,所以今天以省市为例子利用JS+HTML实现简单的二级联动效果,仅做参考。nn nn首先我们思考一下二级表单的产生都需要什么条件nn以前一个选择栏的内容作为展现下一个选择栏的内容的标识,首先第一个选择栏的内容是一部分数据,下一个选择栏的内容是另一部分数据,并且第一部分数据应该...
Thymeleaf使用form表单操作删除功能
第一步nn第二步nn第三步nn记录此笔记的目的是,当需要发送restful风格的删除请求时,写一个form模板,然后使用js对模板进行操作,删除信息。nn
bootstrap表格的每一行添加一个按钮事件
1.在列属性中加入事件 {n title:'数据量序号',n field:'sjid'n // hidden:truen },{n field: 'operate',
table表格每一行增加和删除功能,增加是指在当前行后面,删除是删除当前行
function insertAfter(newElement,targetElement){    var parent = targetElement.parentNode;    if(parent.lastChild == targetElement){        parent.appendChild(newElement);    }else{        parent.inser...
Jquery -点击按钮添加一条新纪录或者删除,并实现Yii2自带的验证
2018-04-23今天需要对work、family、education 页面进行调整,实现点击按钮添加一条新纪录或者删除。此功能需要用到JS,为了方便我选择了JQuery。使用hide()和show()方法实现。(应该有很多方法,后期我再添加进来,现在js小白的我,只能想到隐藏和显示)我的代码实现如下:jquery// work 第一个添加n $(&quot;#workAdd1&quot;).click( fu...
《Flask Web应用结合AJAX技术实现页面中多级表单联动》—人生苦短,我用python(九)
写在前面:nn近期,博主通过Flask Web框架,利用python语言实现多线程ping,数据库采用SQLite实现了针对IP地址管理功能的初步实现。应用整体框架如下:nnnn在应用中,希望能够实现IP地址的使用登记,这时需要在前台页面中实现根据一级菜单选择的内容,动态关联出二级菜单可以选择的内容。nn其中一级菜单的内容是通过在数据库轮询得到的,二级菜单的内容对应的需要根据一级菜单选择的内容作为...
WEB前端 -- 单选按钮、下拉、隐藏、表单
1.单选按钮:radiorn1)name是命名,value的值是提交到服务器时给后台程序看的rn男:rn女:rn2)需要对radio进行设置,才能只能选择一个,即将多个radio用name属性划分为一组。name相同即为一组。rn男:rn女:rn如果只是如上所写type="radio"的话,这一组的radio没有产生关联,2个radio都可以选择,为设置它的唯一性,需要将有关联的radio用nam
自关联jquery无限级联下拉列表
rn本级联适用于:pid自关联数据结构,顶级的pid为0,子级的pid为父级的id.rn rn/**rn * 功能描述:&amp;lt;br&amp;gt;rn * 城市级联jsrn * @author gyxrn */rn$(document).ready(function() {rn //========初始化分类========rn console.log(&quot;init...&quot;);rn var url=&quot;/c...
React实现点击按钮,表格添加一行的效果
    这几天基于react写了一个小demo测试,主要实现的功能是:在输入框中输入文字,点击添加按钮,在下方的表格中会自动添加一行数据,点击删除按钮后,该行数据被删除。nn    先来看看最后的效果图:nn    操作前nnnn    操作后nn  nn    可能样式没怎么调,看着有点别扭,表格样式扒的是菜鸟教程上的,觉得还行的也可以用这个样式哦,或者改成自己喜欢的即可,最重要的是功能实现就好...
table表格中每行都有一个修改按钮怎么实现修改功能
示例图如下:rnrnrnrn点击修改按钮,如何修改按钮所在行的信息?rn一般像这种形式的页面都是在js中动态拼接:rnrnrnrn关键在于按钮采用append追加到里的button的,onclick事件不能在标签里写,应该用如下方法定义:rn$(document).on('click', '#updateBtn', function () {rn         var code=$(this).
html下拉框之间的联动------一级分类和二级分类
html/js代码如下:nnnnn 湖北n 广东nnnn 黄冈n 武汉nnnnnfunction change()n{n var x = document.getElementById("first");n var y = document.getElementById("second");n y.options.length = 0; // 清除second下拉框的
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
[size=large][b]script代码:[/b][/size]rnrn $(document).ready(function(){ rn rn $(&quot;#add&quot;).click(function(){ rn rn $(&quot;#select1 option:selected&quot;).appendTo(&quot;#select2&quot;); rn ...
html表单 select多选下拉箭头的问题
开发中碰到 需要使用表单多选标签select,但是需求是自带酷炫的外框,而且下拉箭头不能用原生的。首先是初始化select标签,清除原生的边框样式:border:none;outline-style:none;去掉原生箭头然后模拟箭头n{appearance:none;n-moz-appearance:none;nn-webkit-appearance:none;},一般需要加上前缀,有兼
vue实现下拉表单二级联动
n&amp;lt;!--一级菜单--&amp;gt;n&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;n &amp;lt;option value=&quot;选择一级菜单&quot;&amp;gt;选择一级菜单&amp;lt;
html表格新增一行和删除一行
n主要思路:现在页面中写一段你想要的html代码样式,然后设置为隐藏不可见(style=&quot;display: none&quot;).然后在js中获取该段代码,做处理后重写回html中nnn nnn&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html lang=&quot;en&quot;&amp;gt;n&amp;lt;head&amp;gt;n &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;n &amp;l
form表单中删除、增加tr
需求:通过点击添加、删除按钮能够增加或删除一行rnrnrn思路:先写出一行tr,将此tr内的html追加到容器中,实现添加功能rn页面代码:rn<div class="easyui-panel" title="商品信息" data-options="collapsible:true"n style="width:99%;height:auto;padding:10px;">n
Django web开发中的二级联动select 列表的简单实现方法
因给单位行行政部门开发一个《文具管理系统》需要在管理端的入库和员工的领用端实现按文具分类查找出相应的文具,在页面上放了二个select,nn第一个select 列出文具分类, 第二个select根据第一个select的分类列出相应的文具。nn一, models.pynnnclass stat_type(models.Model):n name = models.CharField(max_l...
javascript二级联动表单
javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单
根据select下拉框选择的值,向form表单添加所要显示的内容的方法
form表单n  nnn  n            跟单结果n            n                <select name="Ext_WithResult" id="Ext_WithResult"nonchange="change(this)" class="select Regional"> n//绑定onchange操作
elementui的组件:form表单之动态增减表单项
记录一下对这个组件的使用。nn源代码是这样的:nnn&lt;el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"&gt;n &lt;el-form-itemn prop="email"n label="邮箱"n :rule...
jquery点击一个按钮动态生成一组能删除的input框
&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html&amp;gt;n&amp;lt;head&amp;gt;n&amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&amp;gt;n&amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;nn&amp;lt;script src=&quot;js/jquery-1
angular table表格中包含下拉框
n&amp;lt;td mat-cell *matCellDef=&quot;let element &quot;&amp;gt;n &amp;lt;mat-select [(value)]=&quot;element.attributeIdenty&quot; placeholder=&quot;被约束属性&quot; (selectionChange)=&quot;onChange(item,element)&quot; #item&amp;gt;n &amp;lt;mat-option
jQuery 点击按钮,表格增加一行。
添加一行rnrnrnrn姓名年龄性别rnrnrnrnrnfunction addrow(){rnvar tables = $('.table');rnvar addtr = $(""+rn""+rn""+rn""+rn"&nbsp;删除"+rn"");rnrn      addtr.appendTo(tables);     rn}rnfunction deleteTrRow(tr){rn   
实时监控input框,实现输入框与下拉框联动
实时监控input框,实现输入框与下拉框联动nn如图nnnnhtml代码nnnntr>n th scope="row">奖励类型:th>n td>input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="输入关键字" />n select
layui 动态添加的表单元素--select
layui使用的时候select下拉框没有样式nn这个地方绝对是待提升的地方nn1.首先说一下为什么会出现这种情况nnnn官方解释nn有些时候,你的有些表单元素可能是动态插入的。这时形式模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif)但是没有关系,你只需要执行  form.render(type,filter);  方法即可。nn解决方案也有nnf...
vue 点击按钮增加一行
data() { return { customized_descs: [1], } },不要js,jq里面的方法了。。。
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 微信公众平台表单开发教程 表单网页制作视频