级联下拉框_element 下拉框实现二级联动 - CSDN
精华内容
参与话题
  • 两种方法实现下拉框级联效果

    千次阅读 2018-07-16 22:12:38
    第一种:普通方法 比如说var message为后台传递到前端的一个数组(一般来说,后台传递到前端的是JSON类型的数据,此数据包含很多其他的成分,我们可以通过console.log()方法打印出该数据包含的具体成分,在从中拿到...

    第一种:普通方法

    比如说var message为后台传递到前端的一个数组(一般来说,后台传递到前端的是JSON类型的数据,此数据包含很多其他的成分,我们可以通过console.log()方法打印出该数据包含的具体成分,在从中拿到自己需要的数据)

    //首先,我们需要遍历该数组(message为该数组,)

    $.each(message,function(index.item){

    //获取到了数组中的每个元素

    var eachItem = item

    //将获取到的每个数据拼接到id为selectItem的<select>元素中

    $("#selectItem").append("<option id='bdate'>"+eachItem+"</option>");

    }

    //在<body>中定义一个下拉框

    <select id="selectItem">

    </select>

    这样我们就可以生成一个下拉框了

    那么如何产生级联的效果呢?我们那最经典的省市区做三级级联进行演示

    jsp:

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    <%--
    
      Created by IntelliJ IDEA.
    
      User: DELL
    
      Date: 2018/7/16
    
      Time: 10:22
    
      To change this template use File | Settings | File Templates.
    
    --%>
    
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
    <script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
    
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    
    <script type="text/javascript" src="jquery-easyui-1.4a/jquery.min.js"></script>
    
    <script type="text/javascript" src="jquery-easyui-1.4a/jquery.easyui.min.js"></script>
    
    <script type="text/javascript" src="script/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4a/themes/default/easyui.css">
    
    <link rel="stylesheet" type="text/css" href="style/style.css"/>
    
    <script type="text/javascript" src="page/comm.js"></script>
    
    <html>
    
    <head>
    
        <title>Title</title>
    
        <script>
    
            function changeToCity() {
    
                $("#sec1 option:gt(0)").remove();
                $("#sec2 option:gt(0)").remove();
    
                var select = document.getElementById("sec");
    
                var value = select.value;
    
                obj = {
    
                    "proId": value
    
                };
    
                var data = getData("pca_findCitiesByProvinceId", obj);
    
    
                $.each(data.pca2List, function (index, item) {
    
                    var city = item.cityName;
    
                    var cityId = item.cityID;
    
    
                    $("#sec1").append("<option value='" + cityId + "'>" + city + "</option>")
    
                })
    
    
            }
    
    
            function changeToArea() {
    
                $("#sec2 option:gt(0)").remove();
    
                var select = document.getElementById("sec1");
    
                var value = select.value;
                obj = {
    
                    "cityId": value
    
                };
    
                var data = getData("pca_findAreasByCityId", obj);
                console.log(data);
    
                $.each(data.pca3List, function (index, item) {
    
                    var disName = item.disName;
    
                    $("#sec2").append("<option>" + disName + "</option>")
    
                })
    
    
            }
    
        </script>
    
    </head>
    
    <body>
    
    省:<select onchange="changeToCity()" id="sec">
    
        <option>请选择</option>
    
        <c:forEach items="${pca1List}" var="obj" varStatus="index">
    
            <option name="pro" id="pro" value="${obj.proID}">${obj.proName}</option>
    
        </c:forEach>
    
    </select><br/>
    
    市:<select onchange="changeToArea()" id="sec1">
    
        <option>请选择</option>
    
    </select><br/>
    
    区:<select id="sec2">
    
        <option>请选择</option>
    
    </select>
    
    </body>
    
    </html>
    

    action:

    package com.ictehi.action.intelligent;
    
    import com.ictehi.action.comm.BaseAction;
    import com.ictehi.model.weather.pca1;
    import com.ictehi.model.weather.pca2;
    import com.ictehi.model.weather.pca3;
    import com.ictehi.service.intelligent.pcaService;
    import org.springframework.stereotype.Controller;
    
    import javax.annotation.Resource;
    import java.util.List;
    
    
    @Controller("pcaAction")
    public class pcaAction extends BaseAction {
        @Resource
        pcaService pcaservice;
    
        List<pca1> pca1List;
        List<pca2> pca2List;
        List<pca3> pca3List;
        Integer proId;
        Integer cityId;
    
        public String findProvinces() {
            pca1List = pcaservice.findProvinces();
            return "list";
        }
    
        public String findCitiesByProvinceId(){
            pca2List = pcaservice.findCitiesByProvinceId(proId);
            return "success";
        }
    
        public String findAreasByCityId(){
            pca3List = pcaservice.findareasByProvinceId(cityId);
            return "success";
        }
    
        public List<pca1> getPca1List() {
            return pca1List;
        }
    
        public void setPca1List(List<pca1> pca1List) {
            this.pca1List = pca1List;
        }
    
        public List<pca2> getPca2List() {
            return pca2List;
        }
    
        public void setPca2List(List<pca2> pca2List) {
            this.pca2List = pca2List;
        }
    
        public Integer getProId() {
            return proId;
        }
    
        public void setProId(Integer proId) {
            this.proId = proId;
        }
    
        public List<pca3> getPca3List() {
            return pca3List;
        }
    
        public void setPca3List(List<pca3> pca3List) {
            this.pca3List = pca3List;
        }
    
        public Integer getCityId() {
            return cityId;
        }
    
        public void setCityId(Integer cityId) {
            this.cityId = cityId;
        }
    }

    service:

    package com.ictehi.service.intelligent;
    
    import com.ictehi.model.weather.pca1;
    import com.ictehi.model.weather.pca2;
    import com.ictehi.model.weather.pca3;
    import org.springframework.jdbc.core.BeanPropertyRowMapper;
    import org.springframework.jdbc.core.JdbcTemplate;
    import org.springframework.stereotype.Service;
    
    import javax.annotation.Resource;
    import java.util.List;
    
    @Service("pacservice")
    public class pcaService {
        @Resource
        JdbcTemplate sqljdbcTemplate;
    
        public List<pca1> findProvinces(){
            String sql = "select ProName,proID from T_Province";
            List<pca1> list = sqljdbcTemplate.query(sql, new BeanPropertyRowMapper(pca1.class));
            return list;
        }
    
        public List<pca2> findCitiesByProvinceId(Integer proID){
            String sql = "select cityName,cityId from T_City c \n" +
                    "left join T_Province p on c.ProID = p.ProID\n" +
                    "where p.ProID = " + proID;
            List<pca2> list = sqljdbcTemplate.query(sql, new BeanPropertyRowMapper(pca2.class));
            return list;
        }
    
        public List<pca3> findareasByProvinceId(Integer cityID){
            String sql = "select DisName from T_District d \n" +
                    "left join T_City c on c.CityID = d.CityID\n" +
                    "where c.CityID = "+cityID;
            List<pca3> list = sqljdbcTemplate.query(sql, new BeanPropertyRowMapper(pca3.class));
            return list;
        }
    
    }
    

    第二种easyui:

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%--
      Created by IntelliJ IDEA.
      User: DELL
      Date: 2018/7/16
      Time: 10:22
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4a/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4a/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="script/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4a/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="style/style.css"/>
    <script type="text/javascript" src="page/comm.js"></script>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript">
            window.onload = function () {
                var data = ${listArray};
                $("#pro").combobox({
                    data: data,
                    valueField: "proID",//value值
                    textField: "proName",//文本值
                    panelHeight: "auto",
                    onHidePanel: function () {
                        $("#city").combobox("setValue", "请选择");
                        $("#area").combobox("setValue", "请选择");
                        var proId = $('#pro').combobox('getValue');
                        var data1 = getData("pca_findCitiesByProvinceId?proId=" + proId);
                        console.log(data1);
                        $("#city").combobox("loadData", data1.pca2List);
                    }
                });
                $('#city').combobox({
                    editable: false, //不可编辑状态
                    cache: false,
                    panelHeight: '150',//自动高度适合
                    valueField: 'cityID',
                    textField: 'cityName',
                    onHidePanel: function () {
                        var cityId = $('#city').combobox('getValue');
                        var data2 = getData("pca_findAreasByCityId?cityId=" + cityId);
                        console.log(data2);
                        $("#area").combobox("loadData", data2.pca3List);
                    }
                });
                $('#area').combobox({
                    editable: false, //不可编辑状态
                    cache: false,
                    panelHeight: '150',//自动高度适合
                    valueField: 'disName',
                    textField: 'disName',
                });
            }
    
        </script>
    </head>
    <body>
    省:<input class="easyui-combobox" id="pro" name="pro" value="请选择"/><br/>
    市:<input class="easyui-combobox" id="city" name="city" value="请选择"/><br/>
    区:<input class="easyui-combobox" id="area" name="area" value="请选择"/>
    </body>
    </html>
    

     

    展开全文
  • 级联下拉列表 ajax实现(两种方式)

    千次阅读 2018-01-25 16:16:53
    案例:设置一个级联下拉列表,省市区,根据id进行查找,同属于同一个省的城市前两位id相同,属于同一个市的区前4位id相同 数据库数据如下(部分): 第一种方式:通过获取json对象,然后进行解析json对象...

    案例:设置一个级联下拉列表,省市区,根据id进行查找,同属于同一个省的城市前两位id相同,属于同一个市的区前4位id相同

    数据库数据如下(部分):


    第一种方式:通过获取json对象,然后进行解析json对象数组,动态创建下拉列表

    1:Dao代码如下:

    package com.oracle.dao;
    
    import java.util.List;
    
    import com.oracle.jdbc.util.Dao;
    import com.oracle.vo.City;
    
    public class CityDaoImpl implements CityDao {
       //第一种方式的方法,通过id+两位占位符获取 对象,id可以为空
    	@Override
    	public List<City> getCity(String id) {
    		String sql="select id,name from city where id like'"+id+"__'";
    		
    		return Dao.query(sql,City.class);
    	}
       //第二种方式的方法,获取对象存到list,循环取出 连接成html代码形式的字符串
    	@Override
    	public String getCities(String id) {
    		StringBuffer sb=new StringBuffer();
    		List<City>list=Dao.query("select id,name from city where id like'"+id+"__'",City.class);
    		for(City l:list){
    			sb.append("<option value='"+l.getId()+"'>"+l.getName()+"</option>");
    		}
    		return sb.toString();
    	}
    
    }
    
    2:在servlet中获取城市的id,返回该id下属的市或者区,servlet代码如下,调用dao中方法:

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//获取id值
    		String code=request.getParameter("code");
    		//设置编码
    		request.setCharacterEncoding("utf-8");
    		response.setContentType("text/plain;charset=utf-8");
    		//利用工厂创建dao对象,并调用dao方法
    		CityDao dao=ServiceFactory.getObject(CityDaoImpl.class);
    		List<City>list=dao.getCity(code);
    		//通过jackson包的方法,将list对象转成jason对象,传回jsp中
    		ObjectMapper mapper=new ObjectMapper();		
    		String json=mapper.writeValueAsString(list);
    		
            response.getWriter().append(json);
    	}
    3.在jsp文件中编写ajax代码,实现传id返数据,代码如下
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script  src="js/jquery-1.11.1.js"></script>
    <script>
    $(function(){
    	//初始入口函数
    	//初始传入空字符串,自动查出id为两位的数据,都为省或直辖市
    	$.post("city.do",{code:""},function(data){
    		//循环插入在select中
    		for(var i=0;i<data.length;i++){
    			$("#province").append($("<option>").val(data[i].id).html(data[i].name));		
    		}
    		$("#province").change();
    	},"json")
    	
    	
    	//设置省change函数
    	$("#province").change(function(){
    		$.post("city.do",{code:$(this).val()},function(data){
    			$("#city").empty();//置空
    			for(var i=0;i<data.length;i++){
    				
    				$("#city").append($("<option>").val(data[i].id).html(data[i].name));		
    			}
    			$("#city").change();
    		},"json")
    		
    		
    	});
    	
    	
    	//设置市change函数
    	$("#city").change(function(){
    		$.post("city.do",{code:$(this).val()},function(data){
    			$("#area").empty();//置空
    			for(var i=0;i<data.length;i++){
    				
    				$("#area").append($("<option>").val(data[i].id).html(data[i].name));		
    			}
    		},"json")
    	});
    });
    </script>
    </head>
    <body>
    <select style="width:150px" id="province"></select>省
    <select style="width:150px" id="city"></select>市
    <select style="width:150px" id="area"></select>区
    </body>
    </html>

    第二种方式,通过Dao里的第二个方法,返回html代码形式的 list对象,直接设置在select的html中,可自动生成下拉菜单,级联更新子列表操作同上,不做过多解释

    1:servlet,代码如下:

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//取id
    		String id=request.getParameter("code");
    		//置编码
    		request.setCharacterEncoding("utf-8");
    		response.setContentType("text/plain;charset=utf-8");
    		//调用dao对象的第二个方法,返回htm代码字符串
    		CityDao dao=ServiceFactory.getObject(CityDaoImpl.class);
    		String str=dao.getCities(id);
    		response.getWriter().append(str);
    	}

    2:jsp代码如下(只有script部分,其他部分同第一个方法相同):

    <script>
    $(function(){
    	
    	$.post("city2.do",{code:""},function(data){
    		$("#province").html(data);
    		$("#province").change();
    	})
    	
    	
    	$("#province").change(function(data){
    		$.post("city2.do",{code:$(this).val()},function(data){
    			$("#city").html(data);
    		})
    		$("#city").change();
    	});
    	$("#city").change(function(data){
    		$.post("city2.do",{code:$(this).val()},function(data){
    			$("#area").html(data);
    		})
    	});
    	
    });
    </script>

    以上两种方式都可以很好的实现级联下拉列表的功能,作为自己的学习记录,同时欢迎大家指出错误和可以更好改进的地方,大家一起共同进步~




    展开全文
  • 自定义级联下拉框

    2019-01-07 08:43:03
    2018年4月16号,周一,阳光明媚,暂时告一段落(for ...为了避免自己以后再次用到这样的功能(现成的级联组件暂不讨论),特地记录下自己实现这一小功能的步骤,于人于己都方便: 1 ... 2 &lt;div cla...

            2018年4月16号,周一,阳光明媚,暂时告一段落(for something),继续做个安静的小女子:

            先看效果:

            相信各位大同学对于这样的级联框非常熟悉了吧?为了避免自己以后再次用到这样的功能(现成的级联组件暂不讨论),特地记录下自己实现这一小功能的步骤,于人于己都方便:


     1 ...
     2     <div class="col-sm-11">
     3                     <label class="control-label col-sm-1" style="padding: 7px 0 0 0">大类:</label>
     4                     <div  class="col-sm-3">
     5                         <select id="bigcate" class="form-control" name="bigcate" onchange="bigcateChange('bigcate','areabargain','finalbargain')">
     6                             <option value="-99" selected="selected">请选择</option>
     7                         </select>
     8                     </div>
     9                     <label class="control-label col-sm-1" style="padding: 7px 0 0 0">父类:</label>
    10                     <div  class="col-sm-3">
    11                         <select id="areabargain" class="form-control" name="areabargain" onchange="bigcateChange('areabargain','finalbargain')">
    12                             <option value="-99" selected="selected">请选择</option>
    13                         </select>
    14                     </div>
    15                     <label class="control-label col-sm-1" style="padding: 7px 0 0 0">指标:</label>
    16                     <div  class="col-sm-3">
    17                         <select class="selectpicker form-control" data-live-search="true" id="finalbargain" name="finalbargain">
    18                             <option value="-100" selected="selected">请选择</option>
    19                         </select>
    20                     </div>
    21                 </div>
    22 ...
     1  //当大类及父类改变时触发
     2     function bigcateChange(firstName,secondName,thirdName) {
     3         var bigAreaValue=jQuery("#"+firstName+"").val();
     4         jQuery("#"+secondName+"").html('<option value="-99" selected="selected">请选择</option>');
     5         if(thirdName){
     6             jQuery("#"+thirdName+"").html('<option value="-99" selected="selected">请选择</option>');
     7         }
     8         if(bigAreaValue!=-99){
     9             selectOption(secondName,bigAreaValue);  //当前选项框选择完毕给相邻下拉框赋值
    10         }else{
    11             $('#'+thirdName).selectpicker('refresh');
    12         }
    13     }
     1 //给option下拉框赋值
     2     function selectOption(idname,bigAreaId){
     3         $.post('/dcenter/society/bigcategory',{id:bigAreaId}, function(result){
     4             if(result.length>0){
     5                 var html='';
     6                 for(var i=0;i<result.length;i++){
     7                     html+="<option value="+result[i].id+" >"+result[i].name+"</option>";
     8                 }
     9                 jQuery("#"+idname+"").append(html);
    10             }
    11             $('#finalbargain').selectpicker('refresh');
    12         });
    13     }

            后台接口的查询方法(方法类似):

     1  /**
     2    * 获取大类数据数据
     3    * @returns {Promise.<void>}
     4    */
     5   async bigcategoryAction(){
     6     let id=this.post().id;
     7     let userInfo = await this.session(this.config('ggsjsc_sessionKey'));
     8     let result = await this.model('a_tagsuser').alias('p1').join('tags p2 ON p1.id=p2.id').where({pid:id,state:1,userid:userInfo.id}).select();
     9     if(result.length < 1){
    10         if(userInfo.mark==3){
    11             result = await this.model('a_tagsuser').alias('p1').join('tags p2 ON p1.id=p2.id').where({pid:id,state:1,userid:userInfo.pid}).select();
    12         }
    13     }
    14     return this.json(result)
    15   }

          1.select的onchange事件:

            2.拼接option下拉框即可。

    展开全文
  • 级联下拉列表(三级)

    千次阅读 2020-09-22 16:25:09
    &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport"...

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script>
         //声明省
              var provinces = ["广西", "广东", "湖南"]; //直接声明Array
               //声明市
              var cities = [
                  ["桂平", "柳州", "南宁"],
                  ["中山", "广州","珠海"],
                  ["衡阳", "湘潭","长沙"]
              ];
              var areas = [
                      [
                          ["桂平1", "桂平2", "桂平3"],
                          ["柳州1", "柳州2", "柳州3"],
                          ["南宁1", "南宁2", "南宁3"]
                      ],
                      [
                          ["中山1", "中山2", "中山3"],
                          ["广州1", "广州2", "广州3"],
                          ["珠海1", "珠海2", "珠海3"]
                      ],
                      [
                          ["衡阳1", "衡阳2","衡阳3"],
                          ["湘潭1", "湘潭2","湘潭3"],
                          ["长沙1", "长沙2","长沙3"]
                      ]
                  ]
              
              //初始化省份
              window.οnlοad=function initProvince(){               
                    var pro = document.getElementById("province");                
                    for(var i=0;i<provinces.length;i++){
                         pro.add(new Option(provinces[i],i),null);    //i为value值                
                    }
              }
              var pindex;
              //省份变化,城市也跟着变化
              function changeProvince(){
                     var province = document.getElementById("province");
                     var ci = document.getElementById("city");
                     var country = document.getElementById("countrySide");                
                     ci.options.length=0;//清空城市列表
                     country.options.length=0;//清空乡镇列表
                     pindex = province.value;//省份下标
                     //哈哈,我爱编代码
                     if(-1==pindex){
                          ci.add(new Option("--请选择省份--","-2"),null);
                          country.add(new Option("--请选择省份--","-2"),null);
                     }
                     var city = cities[pindex];//省份对应的城市(默认值)
                     var quxu = areas[pindex][0];//城市对应的乡镇
                    
                     //城市变化
                     for(var i=0;i<city.length;i++){                        
                            ci.add(new Option(city[i],i),null);i为value值                        
                     }               
                     //乡镇变化(默认值)                 
                     for(var i=0;i<quxu.length;i++){
                           country.add(new Option(quxu[i],i),null);                      
                     }
              }
              //乡镇跟着城市变化
              function changeCity(){
                     var countrySide = document.getElementById("countrySide");
                     countrySide.options.length=0;//清空乡镇列表
                     var cindex = document.getElementById("city").value;//城市的下标
                     var count = areas[pindex][cindex];//省份对应的城市所对应的乡镇
                     for(var i=0;i<count.length;i++){
                           countrySide.add(new Option(count[i],i),null);  
                     }
              }
        </script>
    </head>
    <body>
          <h2>省市乡</h2>
             省份选择:<select id="province" οnchange="changeProvince()">
                     <option value="-1">--请选择省份--</option>
               </select>
            城市选择:<select id="city" οnchange="changeCity()">
                    <option value="-1">--请选择城市--</option>
               </select>
           乡镇选择:<select id="countrySide">
                       <option value="-1">--请选择乡镇--</option>
               </select>      
    </body>
    </html>

    展开全文
  • 级联下拉列表框

    千次阅读 2015-12-09 21:44:53
    还是老规矩,先来看下...这就省份等常见的级联下拉列表框的原型;下面来看看代码的构成 标题 body{ font-size: 13px; } .clsInit{ width: 435px; height: 35px; line-height:
  • html中得省市下拉框二级级联实现

    万次阅读 热门讨论 2017-12-08 11:05:37
    省市二级级联指的是选中某个省,市得下拉框option根据选择得省份来改变,具体意思大致如下图: 具体实现: 1.新建一个info.js文件,存放省市信息。内容如下: //保存省份数组 var provinceArr = []; provinceArr[0]...
  • 级联下拉框

    2019-09-17 09:16:33
    -- 查询职能类型下拉框 --> <select id="getFuncTypeList" resultType="hashmap"> SELECT D.REC_VALUE,D.REC_KEY FROM S_DICT D WHERE D.REC_TYPE = 'T_FUNCTION' </select> ...
  • 级联下拉框动态加载数据

    千次阅读 2018-10-25 16:04:35
    下拉框级联效果图:   JS代码:  + 、- 号事件 /** * 加号或减号事件 * @param {Object} e */ function changeDiv(e) { var ee = $(e)...
  • js实现级联下拉列表

    2019-03-01 19:43:04
    效果图: HTML: &lt;select class="form-control" onchange="changeCondition(this.value)"&gt; &lt;option value="0"&gt;-...
  • 原创文章,转载请注明原作者及出处链接...1. 假设我们的Excel有两个sheet,第一个sheet需要有两个下拉框:地市、区县——其中区县作为地市的二级下拉框级联。下面是具体实现步骤: 2. 首先我们在“数据字典”
  • 用select2做级联下拉选择

    万次阅读 2017-12-08 17:18:19
    两个下拉框,通过选择年级下拉框进行查询该年级下的所有班级。 可以对select添加onchage事件,监控下拉事件,下拉选择年级,把年级id传入后台查询出该年级下属班级,把班级列表展示到下拉框。 js:$("#grade")....
  • 动态数据源,利用的items绑定,方法带有参数如: ${fns:getDictList($("id").text())}" itemLabel="label" itemValue="value" htmlEscape="false" />
  • </select><br> 籍贯: 安徽 //在安徽下有分安徽的省份 江苏</option> //在江苏下又分江苏的省份 </select><br>
  • 级联关系存在于各种各样的业务场景中。如省市级联、部门级联、年级班级级联等等。在用Axure 9设计原型时,碰到这种级联关系的下拉选项,该如何操作呢?
  • jQuery easyUI combobox下拉框 联动 级联

    万次阅读 2016-08-17 11:14:28
    新做了一个下拉框联动的小功能,网上找的是省市级联,之前也套用了,这次是自定义的一个级联,相当于父子关系,有如下两张表: 表A: (分类表)(相当于主菜单) 表B: (目录表)(相当于子菜单) 注:...
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ... var p=["黑龙江","吉林","山东"];... var c=[["哈尔滨","齐齐哈尔","大庆"],
  • easyui下拉框动态级联加载

    万次阅读 2015-01-18 10:50:00
    easyui的下拉框动态加载数据,高校中要根据首先查询所有学院,然后根据学院动态加载课程。下面看如何实现。 1.界面效果   2. html + js代码 学院名称: 课程名称: $(function() { // 下拉框选择...
  • layui的下拉框级联实现

    千次阅读 2019-12-25 15:47:12
    layui的下拉框级联解决代码如下: <div class="layui-form toolbar"> <div class="layui-inline"> <label class="layui-form-label">一级分类</label> <div class="layui-input-...
  • 利用jquery实现select下拉框级联效果

    千次阅读 2017-03-22 16:29:03
    所谓级联效果,即页面上存在具有包含关系的多组下拉框。当逻辑上的父级下拉框某个选项被选中(即selected),其包含的列表内容作为子级下拉框中的选项(option)供用户选择。例如:当用户选择所在区域时,城市下拉框...
  • HTML代码 解决办法: 应该是级联太深了,导致vue来不及刷新,所以使用this.$forceUpdate()进行强制刷新。
1 2 3 4 5 ... 20
收藏数 3,769
精华内容 1,507
关键字:

级联下拉框