精华内容
下载资源
问答
  • select下拉列表实现多级联动
    千次阅读
    2019-09-02 17:45:04

    下拉列表实现多级联动

    html/jsp页面:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="renderer" content="webkit"/><!-- 让360浏览器默认选择webkit内核 -->
    </head>
    
         <div>
              <select id="projectcd" name="项目选择">
                   <option value="all">----请选择----</option>
              </select>
         </div>
         <div>
              <select id="rtucode" name="测站选择" >
                  <option value="">----请选择----</option>
              </select>
          </div>
    </body>
    <script>
        /*初始化加载项目选择框*/
        $(function () {
           $.ajax({
                type : 'post',
                url : 'http://localhost:8080/xxx/xx',
                dataType : 'json',
                success: function (data){
                    var depart_list = data.data;
                    var opts = "";
                    for( var i = 0 ; depart_index < depart_list.length; i++ ){
                        var obj = depart_list[i];
                        opts += "<option value='"+obj.cd+"'>"+obj.nm+"</option>";
                    }
                    /*给下拉框付值*/
                    $("#projectcd").append(opts);
                },
                error : function(){
                    alert('菜单加载异常!');
                }
          })
    
         /*项目选择框的值改变后触发该方法*/
         $("#projectcd").change(function(){
            /*获取项目选择框的值*/
            var cd=$("#projectcd").val();
            /*删除测站选择框的值重新再加载*/
            $("#rtucode").find("option").remove();
            $.ajax({
                type : 'post',
                url : 'http://localhost:8080/xxx/dd,
                data:{"cd":cd},
                dataType : 'json',
                success: function (data){
                    var depart_list = data.data;
                    var opts = "<option value=''>"+"----请选择----"+"</option>" ;
                    for( var i = 0 ; i < depart_list.length; i++ ){
                        var obj = depart_list[depart_index];
                        opts += "<option value='"+obj.stcd+"'>"+obj.stnm+"</option>";
                    }
                    /*给下拉框付值*/
                    $("#rtucode").append(opts);
                },
                error : function(){
                    alert('菜单加载异常!');
                }
            })
        });
    
    </script>
    </html>

    如果第二个下拉框也要初始化的话,只需在初始化方法  $(function () {    });中再添加一个ajax即可。

    java代码:

    @Controller
    @RequestMapping("/xxx")
    public class selectController{
    
       /**
         * 获取项目下拉框
         * @Date 2019-08-31
         * @author xyq
         */
        @RequestMapping("/xx")
        @ResponseBody
        public Object projectlist(){
            Map selectMap = new HashMap();
            List<Project> list= new ArrayList<Project>();
            Project pro1 = new Project();
            Project pro2 = new Project();
            pro1.setCd("1");
            pro1.setNm("1");
            pro2.setCd("2");
            pro2.setNm("2");
            list.add(pro1);
            list.add(pro2);
            selectMap.pit("data",list);
            return selectMap ;
        }
    
      /**
         * 获取测站下拉框
         * @param
         * @Date 2019-08-31
         * @author xyq
         */
        @RequestMapping("/aa")
        @ResponseBody
        public Object  stationlist(@PathVariable String cd){
            Map map = new HashMap();
            List<Station> list = new ArrayList<Station>();
            List<Station> selectlist = new ArrayList<Station>();
    
            Station st1 = new Station();
            Station st2 = new Station();
            st1 .setCd("1");
            st1 .setStcd("1");
            st1 .setStnm("1");
    
            st2 .setCd("2");
            st2 .setStcd("2");
            st2 .setStnm("2");
    
            list.add(st1);
            list.add(st2);
            //如果cd值是all全部加载,否则找和项目cd对应的
            if(!"all".equals(cd)) {
                int i = 0;
                for (Station st: list) {
                    if(cd.equals(st.getCd())){
                        selectlist .add(st);
                    }
                }
                map.put("data", selectlist );
            }else{
                 map.put("data", list);
            }
    
            return map;
        }
    
    }

    实体类:

    /*项目实体类*/
    public class Project(){
       public String cd; //和测站cd是关联字段
       public String nm;
       public void setCd(String cd){
          this.cd=cd;
       }
       public String getCd(){
          return this.cd;
       }
       public void setNm(String nm){
          this.cd=cd;
       }
       public String getNm(){
          return this.nm;
       }
    }
    
    
    /*测站实体类*/
    public class Station(){
       public String cd; //和项目cd字段是关联字段
       public String Stcd;
       public String Stnm;
       public void setCd(String cd){
          this.cd=cd;
       }
       public String getCd(){
          return this.cd;
       }
       public void setStcd(String stcd){
          this.stcd=stcd;
       }
       public String getStcd(){
          return this.stcd;
       }
       public void setStnm(String Stnm){
          this.Stnm=Stnm;
       }
       public String getStnm(){
          return this.Stnm;
       }
    }

     

    更多相关内容
  • 本文实例介绍了jQuery实现多级联动下拉列表查询框的详细代码,分享给大家供大家参考,具体内容如下  效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
  • NULL 博文链接:https://heisetoufa.iteye.com/blog/353661
  • 用Ajax实现多级联动下拉列表For JSP

    热门讨论 2011-04-01 03:48:53
    这是将《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库))》(原来是asp的)改写成JSP。下载包中包含一个org.json.jar,测试的时候,请将这个包加了应用服务器的lib目录中,原文地址:...
  • 网页制作过程中,我们经常会用到多级联动下拉列表,下面以全国地区多级下拉列表为例,说明用Ajax方式,从全国地区数据库异步读取数据,以JSON传输数据的实现方法。全国地区多级下拉列表,至少需要省、市、县三级,...

    网页制作过程中,我们经常会用到多级联动下拉列表,下面以全国地区多级下拉列表为例,说明用Ajax方式,从全国地区数据库异步读取数据,以JSON传输数据的实现方法。

    全国地区多级下拉列表,至少需要省、市、县三级,他们之间需要联动,下图是最终效果:

    a4c26d1e5885305701be709a3d33442f.png

    代码包含两个文件和一个数据库:index.html,下拉列表显示页面;optionServer.asp,为index.html异步提供数据。

    数据库结构:

    id:自动增加,数值型

    text:地区名,字符型

    code:地区代码,字符型

    ParentCode:上级地区代码,顶级时为空,字符型

    代码如下:

    index.html:

    /p>

    1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    全国行政地区级联下拉列表框

    省/直辖市:

    οnchange="OpSelectChange(this)"

    style="width:100px;">

    市:

    οnchange="OpSelectChange(this)"

    style="width:100px;">

    县/区:

    οnchange="this.value=this.options[this.selectedIndex].value;"

    style="width:100px;">

    var request;

    var OptionsName;

    iniOptions();

    //初始化第一个列表框

    function iniOptions() {

    OptionsName = "op1";

    getNextOptions(""); //初始化第一个列表框

    }

    //创建求XMLHttpRequest对象

    function createRequest() {

    try {

    request = new XMLHttpRequest();

    } catch (trymicrosoft) {

    try {

    request = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (othermicrosoft) {

    try {

    request = new ActiveXObject("Microsoft.XMLHTTP");

    } catch (failed) {

    request = false;

    }

    }

    }

    if (!request)

    alert("错误,无法请求XMLHttpRequest!");

    }

    //发送请求,获取下一个列表框的列表数据

    //参数oValue为当前列表框的选中值,此值作为下一个列表框的parentID号

    function getNextOptions(oValue) {

    createRequest();

    var url = "OptionServer.asp?parentid=" + oValue;

    request.open("GET", url, true);

    request.onreadystatechange = opcallback;

    request.send(null);

    }

    //回调函数

    function opcallback() {

    if (request.readyState == 4) {

    if (request.status == 200) {

    var response = request.responseText; //获取服务器返回的JSON字串

    addOptions(response); //添加option选项

    } else

    alert("status is " + request.status);

    }

    }

    //添加option选项

    function addOptions(str) {

    var jsonObj = eval_r(str);// JSON字符串转JSON对象

    var opObj = document.getElementByIdx_x(OptionsName);

    clearlaterOP();

    for (i = 0; i < jsonObj.length; i++) {

    var TemOption = new Option(jsonObj[i].title, jsonObj[i].value);

    //定义一个选项对象

    if (i==0) TemOption.selected = "selected"; //设定第一项为被选项

    opObj[opObj.length] = TemOption; //添加到列表

    }

    }

    //清除所有当前及后继option的列表内容

    function clearlaterOP() {

    var obj = document.getElementByIdx_x(OptionsName)

    var nOp = Number(obj.id.substr(obj.id.length - 1, 1));

    for (i = nOp; i <= 3; i++) {

    var opTemp = document.getElementByIdx_x("op" + i);

    opTemp.length = 0;

    }

    }

    //option的onchange事件

    function OpSelectChange(obj) {

    obj.value = obj.options[obj.selectedIndex].value;

    OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) +

    1); //自动确定下一option的id号,为添加选项作准备

    getNextOptions(obj.value);

    }

    OptionServer.asp:

    CODEPAGE="65001"%>

    response.Charset="utf-8"

    Response.ContentType = "text/HTML"

    ParentID=Trim(Request("parentid"))

    Set Conn=Server.CreateObject("ADODB.Connection")

    Connstr="DBQ="+server.mappath("area.mdb")+";DefaultDir=;DRIVER={Microsoft

    Access Driver (*.mdb)};"

    Conn.Open Connstr

    Set Rs=Server.CreateObject("ADODB.Recordset")

    if ParentID="" then

    sql="select text,code from area where Parentcode is null"

    else

    sql="select text,code from area where

    Parentcode='"&ParentID&"'"

    end if

    rs.open sql,conn,1,1

    str="["

    do while not rs.eof

    str=str & "{'title':'" & rs("text")

    & "','value':'" & rs("code")

    & "'},"

    rs.moveNext

    loop

    str=left(str,len(str)-1)+"]"

    Response.Write(str)

    Rs.Close

    Set Rs=Nothing

    Conn.Close

    Set Conn = Nothing

    %>

    实现过程:1、当某个下拉列表更改选定时,会触发onchange事件,代码中用function

    OpSelectChange(obj)来处理该事件,主要做两件事,一是根据当前下拉列表的ID号,确定下级下拉列表的id号,并填入变量OptionsName;二是调用getNextOptions(obj.value)向服务器发送请求。

    2、function

    getNextOptions(obj.value)将当前下拉列表的选中值作为参数发送给optionServer.asp,其中定义了回调函数:function

    opcallback()。

    3、服务器接收getNextOptions(obj.value)的传值,并以此值作为Parentcode,查询该值下的所有记录,并将记录组合成JSON格式的字符串。字串格式类似“[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]”。服务器处理完数据后,回调客户端opcallback()。

    4、function

    opcallback()用request.responseText获取服务器传来的JSON字符串,将其它转换成JSON对象后,添加下级下拉列表项目。

    困惑:在代码调试过程中,曾遇到一些头疼的事情,主要是用JSON传中文字符的问题,开始调试时在OptionServer.asp文件头部并没有加

    CODEPAGE="65001"%>和Response.ContentType =

    "text/HTML"这两句。测试过程中,以Response.Write("[{'title':'北京','value':'100001'},{'title':'天津','value':'200001'}]")作为返回数据,在客户端能得到正确的数据,但用Response.Write("[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]")作为测试数据时,(三个汉字),在客户端显示的数据是“[{'title':'北京,'value':'100001'},{'title':'天津,'value':'200001'}]")”,“市”没有了,而且少了个“,”,导致无法转换成JSON对象。加入

    CODEPAGE="65001"%>和Response.ContentType =

    "text/HTML",并将OptionServer.asp和index.html设置为utf-8代码格式,才能正常传值。对此百思不得其解,还请高人指点。

    展开全文
  • html 下拉列表 联动选择 展示数据Demo 类似可以实现地址选择
  • 这是将《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库))》(原来是asp的)改写成ASP.NET,服务器端采用WebService。仍然使用JSON传数据。原文地址:...
  • JS——表单操作及select多级联动下拉列表 一、获取表单元素 1、获取页面所有表单元素:document.forms 使用document.forms返回的是一个HTMLCollection数组,数组的元素是form,有多少个form就有多少个元素,每个元素...

    JS——表单操作及select多级联动下拉列表

    一、获取表单元素

    1、获取页面所有表单元素:document.forms

    使用document.forms返回的是一个HTMLCollection数组,数组的元素是form,有多少个form就有多少个元素,每个元素是一个类数组,其中包含了当前表单中的所有元素及其对应的属性。

                <form>
    			
    			<input type="text" />
    			<input type="password" />
    			<input type="button" />
    			<input type="date" />
    			
    		</form>
    		
    		<script type="text/javascript">
    			let formAll = document.forms;
    			console.log(formAll);
    		//HTMLCollection数组,数组中有一个form,form中包含了所有的写的标签及其属性
    		</script>
    

    2、通过获取节点方式获取表单元素:通过js获取节点的标准方法比如document.getElementById、document.getElementsByClassName等

            <form>
    			
    			<input type="text"  id="text"  />
    			<input type="password" class="pwd" />
    			<input type="button" />
    			<input type="date" />
    			
    		</form>
    		
    		<script type="text/javascript">
    			
    			let text = document.getElementById('text');
    			let pwd = document.getElementsByClassName('pwd')[0];
    			let input = document.querySelectorAll('input');
           </script>
    

    注意: 在使用document.querySelector方法获取表单元素时,如果不是通过id、class、元素关系等获取,而是直接通过元素的type属性来获取时,要指明type属性值:

            <input type="radio" />
    		<input type="checkbox" />
    		
    		<script type="text/javascript">
    			let radio = document.querySelector("input[type='radio']");
    			let checkbox = document.querySelector("input[type='checkbox']");
    		</script>
    

    二、表单及表单元素的属性

    1、表单的方法:

    方法说明
    submit()表单提交
    reset()表单重置
            <form >
    			<input type="text" />
    		</form>
    		
    		
    		<script type="text/javascript">
    			let form = document.querySelector('form');
    			let input = document.querySelector('input');
    			form.submit();//提交表单
    			form.reset();//重置表单
    			
    		</script>
    

    2、表单中元素属性操作:

    属性说明
    type可读可写,表示表单元素的类型,可以动态更改类型
    form只读属性,包含了该元素的form表单对象,不存在时返回null
    name可读可写,表示元素的名称
    value可读可写,获取或设置表单元素的值
            <form >
    			<input type="text" name = "set" value="111"/>
    		</form>
    		
    		<script type="text/javascript">
    			let input = document.querySelector('input');
    			console.log(input.type);//text
    			input.type = 'password';//将input框改为密码框
    			console.log(input.form);
    			//查看input元素是否有form包裹,有返回整个表单,没有返回null
    			console.log(input.name);//获取input元素的name属性值
    			input.name = 'settime';//更改input元素的name属性值
    			console.log(input.value);//获取input元素的value属性值
    			input.value = '2222';//更改input元素的value属性值
    			
    		</script>
    

    对于radio和checkbox:

    • radio和checkbox有一个checked属性,将checked设置值为’checked’,会让单选框或多选框选中

    • 或者在设置checked属性值时设置true或false,true表示选中,false代表不选中

            <input type="radio" />
    		<input type="checkbox" />
    		
    		<script type="text/javascript">
    			let radio = document.querySelector("input[type='radio']");
    			let checkbox = document.querySelector("input[type='checkbox']");
    			
    			radio.checked = 'checked';
    			checkbox.checked = 'checked';
    			radio.checked = true;
    			checkbox.checked = true
    		</script>
    

    三、表单元素事件处理

    表单事件有两种:

    • 提交submit

    • 重置reset

            <form>
    			
    			用户:<input type="text"  class="text"  />
    			密码:<input type="password" class="pwd" />
    			<input type="submit" value="提交" class="submit"/>
    			<input type="reset" value="重置" class="reset"/>
    		</form>
    		
    		<script type="text/javascript">
    			let form = document.querySelector('form');
    			let btnSubmit = document.getElementsByClassName('submit')[0];
    			let btnReset = document.getElementsByClassName('reset')[0];
    			let form = document.querySelector('form');
    			
    			btnSubmit.onclick = function(){
    				form.onsubmit = function(){
    					console.log('提交');
    				}
    			}
    			
    			btnReset.onclick = function(){
    				form.onreset = function(){
    					console.log('重置');
    				}
    			}
    			
    		</script>
    

    四、使用select制作多级联动下拉列表

    首先了解一下select的属性和js可以操作select的方法和属性:

    1、select自身的属性:

    • multiple: 设置select为多选

    • size: 当设置了multiple属性,一定要在设置了multiple属性后使用,通过size可以设置select固定可见行数;

    • disabled: 将select中某个option设置为不可选中状态;

    • name: 表单传输过程中的key值;

    • form: 指定select与表单关联的元素(id相同,一般使用较少,id一般是唯一的), 可以使得表单传输项位于DOM任意位置,而非一定要是表单元素的子元素

    2、js操作select:

    (1) select节点.options:

    • 返回其所有option选项,类数组的HTMLOptionsCollection,

    • 可通过selectNode[index]访问option元素


    (2)select节点.selectedIndex:

    • 可读可写,被选中的选项索引,下边从0开始

    • 通过修改selectedIndex的值设置默认选中选项

    (3)select节点.value:得到选中的option值

    (4)option节点.text:得到选项的文本信息,也就是用户看到的选项文字

    (5)option节点.value:得到的是选项的值,和SELECT选中的值有区别

    (6)可以通过节点操作对select的option进行增删查改操作

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<form action="#">
    			<select class="province">
    				<option value ="">--请选择省份--</option>
    			</select>
    			
    		</form>
    		
    		<script type="text/javascript">
    			let menu = [
    				{
    					name: "四川省",
    					pid: 51,
    					city: [
    						{
    							name: "成都市",
    							cid: 5101
    						},
    						{
    							name: "绵阳",
    							cid: 5107
    						},
    						{
    							name: "宜宾",
    							cid: 5115
    						},
    						{
    							name: "广安",
    							cid: 5116,
    							ciyer:[
    								{
    									name: "华蓥市",
    									cyid: 51161
    								},
    								{
    									name: "邻水县",
    									cyid: 51162
    								},
    								{
    									name: "岳池县",
    									cyid: 51163
    								},
    								{
    									name: "武胜县",
    									cyid: 51164
    								}
    							]
    						},
    						{
    							name: "自贡",
    							cid: 5103
    						}
    					]
    				},
    				{
    					name: "云南省",
    					pid: 53,
    					city: [
    						{
    							name: "昆明",
    							cid: 5301
    						},
    						{
    							name: "玉溪",
    							cid: 5302
    						},
    						{
    							name: "大理",
    							cid: 5329
    						},
    						{
    							name: "丽江",
    							cid: 5304
    						},
    						{
    							name: "腾冲",
    							cid: 5305
    						},
    						{
    							name: "文山",
    							cid: 5306
    						}
    					]
    				},
    				{
    					name: "重庆市",
    					pid: 50,
    					city: [
    						{
    							name: "渝中区",
    							cid: 5001
    						}
    					]
    				},
    				{
    					name: "浙江省",
    					pid: 32,
    					city: [
    						{
    							name: "杭州市",
    							cid: 3201
    						}
    					]
    				}
    			]
    			
    			
    			let form = document.forms[0];
    			let select = document.querySelector(".province");
    			// 依次添加省份
    			for(let i = 0; i < menu.length; i++) {
    				select.innerHTML += '<option value = ' + menu[i].pid +'>' + menu[i].name + '</option>';
    				// select.innerHTML += `<option value="${menu[i].pid}">${menu[i].name}</option>`;
    			}
    			
    			let newSelect1 = document.createElement("select");
    			console.log(newSelect1)
    			
    			select.addEventListener("change", function(e) {
    				
    				if(e.target.value == "") {
    					document.forms[0].removeChild(newSelect1)
    				}
    				
    				// 每一次添加新的省份城市时,都要清空newSelect中设置的市
    				newSelect1.innerHTML = "";
    				
    				for(let i = 0; i < menu.length; i++) {
    					if(e.target.value == menu[i].pid) {
    						let city = menu[i].city;
    						for(let j = 0; j < city.length; j++) {
    							let option = document.createElement("option");
    							option.innerHTML = city[j].name;
    							option.value = city[j].cid;
    							newSelect1.appendChild(option);
    						}
    						document.forms[0].appendChild(newSelect1);
    					}
    				}
    			})
    			
    			let newSelect2 = document.createElement('select');
    			newSelect1.addEventListener("change", function(e) {
    				
    				if(e.target.value == "") {
    					document.forms[0].removeChild(newSelect2)
    				}
    				
    				// 每一次添加新的省份城市时,都要清空newSelect中设置的市
    				newSelect2.innerHTML = "";
    				
    				for(let i = 0; i < menu.length; i++) {
    					
    					for(let j = 0; j < menu[i].city.length; j++){
    						if(e.target.value == menu[i].city[j].cid) {
    							let city = menu[i].city[j].ciyer;
    							for(let k = 0; k < city.length; k++) {
    								let option = document.createElement("option");
    								option.innerHTML = city[k].name;
    								option.value = city[k].cyid;
    								newSelect2.appendChild(option);
    							}
    							document.forms[0].appendChild(newSelect2);
    						}
    					}
    					
    					
    				}
    			})
    			
    			
    			
    		</script>
    		
    		
    	</body>
    </html>
    
    
    展开全文
  • JS多级联动下拉列表(不限级数)

    千次阅读 2017-04-21 11:10:30
    微说微娱乐 2017-03-21 21:27 ...JS多级联动下拉列表,可用于省、市、区三级联动,或多级分类联动选择等。 不限级数,兼容浏览器,使用方法请看下面的HTML示例。 示例效果如下图所示: 部分源码:源码地址如下 ...

    JS多级联动下拉列表,可用于省、市、区三级联动,或多级分类联动选择等。

    不限级数,兼容浏览器,使用方法请看下面的HTML示例。

    示例效果如下图所示:

    JS多级联动下拉列表(不限级数)

    JS多级联动下拉列表(不限级数)

    部分源码:源码地址如下

    http://blog.csdn.net/oukunqing/article/details/43406435

    JS多级联动下拉列表(不限级数)

    JS多级联动下拉列表(不限级数)

    JS多级联动下拉列表(不限级数)

    展开全文
  • HTML多级联动下拉选择框,动态获取下一级的实现方法发布时间:2020-10-29 10:54:12来源:亿速云阅读:106作者:小新这篇文章给大家分享的是有关HTML多级联动下拉选择框,动态获取下一级的实现方法的内容。...
  • 本文实例讲述了AngularJS实现的select二级联动下拉菜单功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title><...
  • 视图: cdnauto/views/config/index.php 复制代码 代码如下: echo CHtml::dropDownList(‘node’, ”, CHtml::listData(Node::model()->findAll(),’name’,’name’),array(’empty’=>’–请选择节点–‘, ‘id’ ...
  • 多级联动下拉列表

    2018-09-07 15:14:24
    在项目中用到多级联动功能,为了相对灵活运用在网上也找了很多了例子,下面就是一个相当好用的多联动分级 //HTML部分 选择类型 //第一个下拉框根据后台循环出来 (document).ready...
  • JQ中多级联动下拉选择框

    千次阅读 2018-11-14 10:04:13
    html代码不多说,贴图出来! 效果如下: 下拉效果如下: 重点来了,js代码是重重之重: $(function () { $(&quot;.formOption&quot;).click(function () { //点击外层,下拉出现 $(this).siblings('.formList'...
  • 花了半天时间实现一个多级联动下拉框,目的是对某一植物进行“门纲目科属”的归类。使用的技术是javascript+xml,之所以不用数据库,一来这方面的数据虽然量大但都是固定不变的,二来不希望加重服务器的负担,第三是...
  • fastadmin input实现2级联动 多级联动 添加add页面如下效果。 add.html <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">{:__('水厂')}:</label> <div ...
  • 今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多。另外,这个Select下拉框也...
  • 方法 /** * 级联 * 联动 * @param url:访问json数据的... * @param levelIds:页面下拉标签数组,为联动级数 * @private */ function _yh_linkage(url,params, levelIds){ _yh_postRequest(url,p...
  • 以省市县多级联动选择框为例,省市县数据均来自java后端,返回list,比如省份返回值:[{"id":100101,"name":"北京"},{"id":100501,"name":"内蒙古自治区"},{"id":100801,"name":"黑龙江省"},{"id":101701,"name":...
  • 其实设置方法有很多种,接下来小编举例简单的例子告诉大家Excel函数制作二级联动下拉菜单的方法。Excel函数制作二级联动下拉菜单的方法1、首先看一下原始数据,原始信息在一张工作表,第一行是省市名称,下面的若干...
  • 一、在数据库数据库中建立三个表1.city字段:districtname,locationid,districtid2.province字段:locationid,locationname3.village字段:villageid,villagename...jsp实现三级联动下拉列表框效果Connection c...
  • js javascript 多级下拉列表联动 正则表达式
  • 原生js实现二级联动下拉列表菜单

    千次阅读 2017-03-05 12:36:14
    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下:   var deviceNotExist = true;//防止数据重复 if(data.code == 0) { //查询成功 var...
  • Html <div id="app"> <el-select v-for="(arrItem,key) in selectList" :key="key" v-model="selectArr[key]" filterable placeholder="请选择" value-key="value" @change="selected" @focu...
  • 三级联动下拉框实现

    2015-09-12 11:09:59
    三级联动下拉框实现,包含行政编码,身份证前5位,一个文件实现
  • jQuery cxSelect 多级联动下拉菜单

    千次阅读 2014-08-26 10:41:57
    随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于...
  • 话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果。后来百度了下,在此做个总结吧。 下面是以一名php程序员的角度来分析的。。。可能和前端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 971
精华内容 388
关键字:

html多级联动下拉列表怎么实现