求问,如何做一个二级联动的下拉表单(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);

1个回答

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
【Vue】二级联动下拉表单
如上图所示,需要的功能就是当我选择学校后,能根据该学校的id再去动态获取学院列表信息。 思路就是给选择学校时添加个change事件。 代码如下: &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt; &amp;lt;p&amp;gt; &amp;lt;select id=&quot;universityId&quot; v-on:change=&quot;choo...
仿Select下拉表单 下拉表单
仿Select下拉表单 下拉表单 input输入框下拉选择框
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;
点击增加一层表单
这是一个增加数据库类型 $(document).ready(function(){             $("#addTable").click(function(){                 var tr=""+                         "<input type=\"button\" id='zeng'  value='增加'/>";  
如何通过增加按钮增加一个表单
[img=https://img-bbs.csdn.net/upload/201708/10/1502354513_958334.png][/img]如图所示,怎么样通过点击增加岗位这个按钮之后,能够添加一个表单,而且招聘岗位后面的那个数字递增。。?
DIV+CSS+JS仿Select下拉表单
DIV+CSS+JS仿Select下拉表单 下拉表单
表单序列化及如何增加一行值
if (formObj.form('validate')) { var formData = formObj.serializeArray(); //输出以数组形式序列化表单值 formData.push({name:&quot;yt_materialname&quot;,value: $(&quot;#yt_material...
表单/单选框/下拉表单/输入提示下拉表单
表单/单选框/下拉表单/输入提示下拉表单
点击按钮增加一行表格
点击按钮增加一行表格 做此功能我们要用到两个方法: insertRow(): insertRow() 方法用于在表格中的指定位置插入一个新行。 insertCell() :insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 元素。 <%@ page language="java" contentType="text/html; char
vue 点击按钮增加一行
data() { return { customized_descs: [1], } },不要js,jq里面的方法了。。。
做一个表单
就像淘宝网购物一样,点击购物那个按钮,跳转到表单页,我做了一个表单也类似,首先从数据库里读出以前用户的资料,rnrn用户看到一些自己的资料与现在不符合,然后填写,这个表单所要做的事是(点击按钮)1,把用户重新填的资料更新到数据库。2提交另一个页面继续处理rnrnrn<%rndim Address,Postalcode,user_ZName,Tel,HandPhonernCall ConnOpen()rn Set rs=Server.CreateObject("ADODB.RecordSet")rn sql="select * from WF_Users where User_Name='"&login_username&"'"rn rs.open sql,conn,1,1rn Address=rs("User_Address")rn Postalcode=rs("User_Zip")rn user_ZName=rs("User_ZName")rn Tel=rs("User_Tel")rn HandPhone=rs("User_Hand")rn rs.closern set rs=nothingrn Call ConnClose()rn rn If Request.Form("add")<>"" Thenrnrn Address=Request.Form("Address")rn Postalcode=Request.Form("Postalcode")rn user_ZName=Request.Form("user_ZName")rn Tel=Request.Form("Tel")rn HandPhone=Request.Form("HandPhone")rn rnCall ConnOpen()rnSet rs=Server.CreateObject("ADODB.RecordSet")rnIf Request.Form("add")<>"" Thenrnsql="select * from WF_Users"rn rs.open sql,conn,1,3rn rs.Addnewrn rs("User_Address")=Addressrn rs("User_Zip")=Postalcodern rs("User_ZName")=user_ZNamern rs("User_Tel")=Telrn rs("User_Hand")=HandPhonern rs.updatern rs.closern set rs=Nothingrn Call ConnClose()rn End IfrnEnd Ifrnrndim rs1rnCall ConnOpen()rnSet rs1=Server.CreateObject("ADODB.RecordSet")rnsql="select * from Jifen_lp"rnrs1.open sql,conn,1,1rnrs1.closernset rs1=nothingrnCall ConnClose()rnrn%>rnrnrn [/color]">rnrn rn rnrn现在我不知道action和确定按钮这两个地方怎么写?
求示例代码 关于下拉表单
大侠们 请指教:rn比如 第一个下拉表单中 有 XX公司 rn当选中此选项时,第二个下拉表单中自动显示该公司的所有部门
laravel-admin实现二级联动表单
参考文档:https://laravel-admin.org/docs/zh/model-form-fields#select-%E8%81%94%E5%8A%A8 一、配置联动select表单 $form-&amp;gt;select('category_parent', '产品一级分类') -&amp;gt;options(Category::getCategoryMap(4)) -...
jQuery 表单城市二级联动
*{ padding: 0px; margin: 0px; box-sizing: border-box; } .box{ width: 800px; height: 500px; margin: 20px auto; padding: 10px; } .box table:nth-child(1){ width: 780px; margin-bottom: 5px;
JS表单二级联动
JS表单二级联动 很详细 大家可以前来下载
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-
按一下按钮增加一行
有个按钮"增加“,一按下就会在table多一行rnrn工号rnrn姓名rnrn部门rn rnrn有另一个按钮“删除”,一按下rn上面一行就没了rn
新手求问!怎么在jsp中点击增加按钮时增加相同的一行,点击删除按钮时这一行删除
代码rnrn<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>rn<%rnString path = request.getContextPath();rnString basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";rn%>rnrnrnrn rn rn rn My JSP 'index.jsp' starting pagern rn rn rn rn rn rn rn rn rn rn rn rn rn 用户名称: rn 设置密码: rn rn rn rn rn rn rn rn rn rnrnrn[img=https://img-bbs.csdn.net/upload/201605/29/1464500367_850724.png][/img]
表单增加一行JS,顺序怎么控制?
各位大大好,本人JS小白,在网上拷了个JS,可以使用,但是因为用的人很多,大家的浏览器不一样,所以造成添加的行,顺序不一样,请各位大大解决下!rn[code=javascript] rn[/code]rnrn比如说,在搜狗浏览器的告诉模式下 顺序是:rn[img=http://img.my.csdn.net/uploads/201302/22/1361538727_7339.jpg][/img]rnrn但是在IE6下,顺序则为:rn[img=http://img.my.csdn.net/uploads/201302/22/1361538777_2946.jpg][/img]rnrn请问这个怎么解决呢?
如何做一个没有标题栏的表单?
由于我想做一个表单,它主要是用来显示一条记录的详细内容,因此我想与普通的表单不一样,也就是没有标题栏.rn正常的表单如下:rn ______________________________________rn | xxxx - O X| <----标题栏rn |_____________________________________|rn | |rn | |rn | |rn | 显示内容 |rn | |rn | |rn | |rn | |rn | |rn | |rn |_____________________________________|rn但我想做一个没有标题栏的表单:rn _____________________________________rn | |rn | |rn | |rn | |rn | |rn | |rn | 显示内容 |rn | |rn | |rn | |rn |_____________________________________|rn 在VFP的表单属性里头没有这样的样式,哪位大哥能帮帮忙,或者那里有这样的控件下载???? rn rn rn
如何做一个“查找”子表单?
我想做个查找子表单,当在主表单上点击“查找”按钮时,弹出子表单,在子表单中设定查找条件,点“确定”后返回主表单,并且在主表单中显示查找的结果,该如何做呢?请高手帮忙,谢谢!
问一个小问题,表单中的一个按钮,点击按钮我想得到表单的名称
rnrnrnrn我想在点击button后得到它所在表单的名称,也就是“FName”,谁能告诉我怎么做。
帮忙解决一下 层到下拉表单的上面
解决层到下拉表单的上面rnrn谢谢修改!rnrn代码rn[code=HTML]rnrnrn rn rnrnrn rn 关闭rn 标题:rn 信箱:rn 内容: rn rnrnrn添加 rnrn rnrnrnrnrn[/code]
如何增加修改数据库表单?
我web services生成dataset数据集,在application取得这个数据集,那如何rn去修改数据库呢?application取得的这个数据集是与数据库分离的,修改后rn怎么更新到数据库中呢?
下拉表单的问题?急!!
rn在做一个产品管理的系统,因为有个产品类别(盖板文化)比较特殊,所以实现这个功能:rnrn当用户选择了这个特殊的产品类别时(盖板文化),就转向另一个页面,选择其它的类别时不转向其它的页面,请问如何实现:rnrn下面的代码是我现在写的,是错的,大家帮忙改一下!rnrnrnrnrn onChange="window.location=form.type.options[form.type.selectedIndex].value" <%end if %>>rn请选择产品类别rn<% rnsql="select * from type ORDER by type_p "rnrs.Open sql,conn,1,3 rndo while not rs.eof rnif rs("type_p")<>"盖板文化" then %>rn><%=rs("type_p")%>rn<%else%>rn"><%=rs("type_p")%>rn<%end if rnrs.movenextrnloop rnrs.closern%>rn rn rn
下拉表单的一点问题!
rn<% for i=2002 to 2050 %>rn ><%=i%>rn<%next%>rnrn如果想把i=2045的字段设成选取(selected),该怎么写代码!!!
下拉表单联动的问题
我有一表单,内有两个下拉列表,代码如下:rn";rn rn echo "";rn echo "请选择数据库";rn rn $a_a=mysql_list_dbs();rn while ($a_b=mysql_fetch_array($a_a)) rn echo "$a_b[0]";rn rn rn echo "";rnrn echo "";rn echo "请选择数据库";rn ??????????????????????这里就不知道了rn rnrn?>rnrnrn第一个下拉列表显示出所有的数据库,第二个根据所选的数据库,自动列出该库中的所有数据表,要求不通过按钮和自动刷新实现,请问该如何才能做到???rn
下拉表单问题。
在用javascript脚本做连动下拉表单时,将"1-老虎"的格式用split分解放在数组ar2里,然后加入到下拉表单:rn用rn document.options.add(new Option(ar2[1],ar2[0])); rn 但是如果要把他加入到下拉表单,而且要让他成为选定状态,应该怎么写呢。rn
表单项 —【下拉表单】
&amp;lt;select multiple class=&quot;form-control&quot;&amp;gt; &amp;lt;option&amp;gt;1&amp;lt;/option&amp;gt; &amp;lt;option&amp;gt;2&amp;lt;/option&amp;gt; &amp;lt;option&amp;gt;3&amp;lt;/option&amp;gt; &amp;lt;option&amp;gt;4&amp;lt;/opti
复选框和下拉表单
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;电脑&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form method="get" action=""&gt; ...
三级联动下拉表单
rnrn 三级联动下拉表单试验rnrn<%rnSet Conn = Server.CreateObject("ADODB.Connection")rnStrCnn = "Driver=Microsoft Access Driver (*.mdb);DBQ=" & Server.MapPath("db1.mdb") & ";"rnConn.Open StrCnnrn%>rnrnrnrn rn<% rnset rs=server.CreateObject("adodb.recordset") rnsq="select * from 一级表" rnrs.open sq,conn,1,1rn%> rn rn选择一级目录 rn<%rnwhile not rs.eofrn%> rn"><%=rs("一级类")rn%>rn rn<%rnrs.movenext rnwend rnrs.closern%> rn rn rn选择二级目录 rnrnrn选择三级目录 rnrn rn rn<%rnsql="select * from 二级表" rnrs.open sql,conn,1,1 rnnum=rs.recordcount rnstr="" rnfor i=1 to rs.recordcount rnstr=str&rs("一级类")&"-"&rs("二级类")&"," rnif rs.eof then exit for rnrs.movenext rnnext rnrs.close rn%> rn<%rnsql="select * from 三级表" rnrs.open sql,conn,1,1 rnnum2=rs.recordcount rnstr2="" rnfor i=1 to rs.recordcount rnstr2=str2&rs("二级类")&"-"&rs("三级类")&"," rnif rs.eof then exit for rnrs.movenext rnnext rnrs.close rnrn%>rnrnrn rn rnrnrnrn现在想把这一行"><%=rs("一级类")rn改成"><%=rs("一级类"),可是联动的就不好使了。大家帮忙看看。rn
html的下拉表单
我想要个下拉表单是这样的效果:rn---parent1---rn ∟son1rn ∟son2rn---parent2--rn ∟son1rn ∟son2rn---parent3--rn---parent4--rn---parent5--rn ∟son1rn ∟son2rnrn能看出是2层的效果。rn不能用2个selec联动的。客户就要这样的。rnrnhtml要怎么写。这种数据应该是什么样的?rn
关联的两个下拉表单!
<%rnset rs=Server.CreateObject("ADODB.Recordset")rnsql = "select * from GC_YQXMGL,RS_DEPTLIST where RS_DEPTLIST.DEPTID=GC_YQXMGL.CYDW order by RS_DEPTLIST.DEPTID asc"rnrs.CursorLocation=3rnrs.open sql,cn,1,1rn%>rn rn rn rn --请选择项目名称--rn <%rn strsql1="select * from GC_XMGL "rn set rs1 = cn.Execute (strsql1)rn do while not rs1.eofrn xmid=trim(rs1("XMID"))rn xmname=trim(rs1("XMNAME"))rn %>rn <%=xmname%>rn <%rn rs1.movenextrn looprn rs1.closern set rs1 = nothingrn %>rn rnrn --请选择填报部门-- rn rn rnrnrnrn上面是通过数据库关联的两个下拉表单,录入时将信息写入数据库,rn修改时将信息读出,怎么使数据库中的值选种
angular的下拉表单
//下拉框 <select ng-change="change()" ng-model="age" ng-init="age=ages[0]"> //添加需要的下拉框数据 $scope.ages = ["按年龄正序排序", "按年龄倒序排列"]; //排序 $scope.change = function() {   var a1 = $scope.
如何实现多选的select表单?
一个select,可以实现多选吗?
JS+HTML简单实现表单二级联动效果
表单选择栏二级联动 前言:表单的二级联动不可谓不重要,根据第一个选择栏的内容更改下一个选择栏的整体内容在一些场景下是必要的,所以今天以省市为例子利用JS+HTML实现简单的二级联动效果,仅做参考。   首先我们思考一下二级表单的产生都需要什么条件 以前一个选择栏的内容作为展现下一个选择栏的内容的标识,首先第一个选择栏的内容是一部分数据,下一个选择栏的内容是另一部分数据,并且第一部分数据应该...
二级联动表单中,如何得到DataValueField值?
rnrn rn rnrn rnrnrnrnProtected Sub A (ByVal sender As Object, ByVal e As System.EventArgs) Handles DropBig.SelectedIndexChangedrn rn--如何得到ID="drop1"之DataValueField="A" 值? --rn rnEnd Subrnrn谢谢指导!rnrnrn
layui表单select点击数据回选
select数据回显 这是一个基础的layui表单select的数据操作,欢迎指出更改意见。 直入主题,直接上代码 效果图 点击回选按钮,成功选中了阅读 HTML &amp;amp;lt;div class=&amp;quot;zjC&amp;quot;&amp;amp;gt; &amp;amp;lt;form class=&amp;quot;layui-form&amp;quot; action=&amp;quot;&amp;quot; lay-filter=&amp;quot;exampl
通过按钮重置表单时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&
相关热词 c# 线程结束时执行 c# kb mb 图片 c# 替换第几位字符 c#项目决定成败 c# 与matlab c# xml缩进 c#传感器基础 c#操作wps c# md5使用方法 c# 引用父窗口的组件