精华内容
下载资源
问答
  • 两个列表的代码: ``` <td><select name="gzh_num" > echo "<option value=0>-请选择-  </option>"; @include "conn.php"; //链接数据库 $gzh_num_result=mysql_query("select gzh_num , gzh_name...
  • servlet+ajax做的两个下拉列表联动(数据从数据库查出后显示到HTML上)
  • ![图片说明]...我是用jquery datatable实现的table,现在有状态和在线两个下拉列表,现在只能实现状态和在线分别查询,如何将两个下拉列表关联起来呢?最好前台实现
  • js下拉列表二级联动

    万次阅读 多人点赞 2018-01-20 09:20:59
    好比我有两个下拉列表,第一列表是选择省份,那么我选择某一个省份,那么另一个列表也会对应显示该省份的城市。    如上图所示,我选择了河北省,那么对应的城市列表中就会出现相应的城市。代码如下: js: ...

     学了JS也有一段时间了,今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动,就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有两个下拉列表,第一列表是选择省份,那么我选择某一个省份,那么另一个列表也会对应显示该省份的城市。

     

     如上图所示,我选择了河北省,那么对应的城市列表中就会出现相应的城市。代码如下:

    js:

    cities = new Object();
    cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市');
    cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市', '忻州地区', '吕梁地区', '晋中市', '临汾地区', '运城地区');
    
    function set_city(province, city)
    {
        var pv, cv;
        var i, ii;
    
        pv=province.value;
        cv=city.value;
    
        city.length=1;
    
        if(pv=='0') return;
        if(typeof(cities[pv])=='undefined') return;
    
        for(i=0; i<cities[pv].length; i++)
        {
           ii = i+1;
           city.options[ii] = new Option();
           city.options[ii].text = cities[pv][i];
           city.options[ii].value = cities[pv][i];
        }
    
    }

    jsp:

    <form name="form1" action="" method="get">
        <select name="province" onChange="set_city(this, this.form.city);">
        <option value="0">选择省</option>
        <option value="河北省">河北省</option>
        <option value="山西省">山西省</option>
        </select>
        <select   name="city" id="citys">
        <option value="0">选择城市</option>
        </select>
    </form>

     还有一个案例是关于商品分类的问题,这个多用于网上购物方面。

     

    1 整机
    	15 笔记本 
    	16 笔记本配件  
    	17 台式机 
    	18 服务器 
    	19 服务器配件  
    	20 工作站 
    	21 小型机 
    	22 移动PC 
    	23 平板电脑  
    	24 网络电脑 
    2 数码产品 	 
    	25 数据相机 
    	26 MP3
    	27 便携式DVD 
    	28 数码学习机 
    	29 数码摄像头 
    	30 数码相机伴侣 
    	31 MD播放器
    	32 滤镜镜头 
    	33 多媒体硬盘播放
    3 无线网 
    	34 无线上网卡 
    	35 无线网卡
    4 配件
    	36 CPU 
    	37 内存 
    	38 主板
    5 耗材
    	40 墨盒 
    	41 纸张 
    6 软件
    	42 操作系统 
    	43 办公软件 
    	44 杀毒软件
    7 语音视频
    	45 视频会议 
    	46 视频卡
    8 办公设备
    	47 投影机 
    	48 打印机 
    	49 扫描仪
    9 网络设备
    	50 交换机 
    	51 集线器
    10 机房布线
    	52 测试仪 
    	53 机房空调
    11 移动存储
    	54 闪存卡
    	55 移动硬盘
    12 通讯设备
    	56 手机 
    	57 电话机
    13 显示设备
    	58 液晶显示器 
    	59 CRT显示器
    14 其他
    	60 游戏机
    	61 电池
    	62 音响
    

    附上数据。

     

    HTML:

    <form name="frmProduct">
    ......<br>
    商品大类:
    <select name="sltParent" id="sltParent" onChange="ss()">
        <option value="0">--选择大类--</option>
        <option value="1">--整机--</option>
        <option value="2">--数码产品--</option>
        <option value="3">--无线网--</option>
        <option value="4">--配件--</option>
        <option value="5">--耗材--</option>
        <option value="6">--软件--</option>
        <option value="7">--语音视频--</option>
        <option value="8">--办公设备--</option>
        <option value="9">--网络设备--</option>
        <option value="10">--机房布线--</option>
        <option value="11">--移动存储--</option>
        <option value="12">--通讯设备--</option>
        <option value="13">--显示设备--</option>
        <option value="14">--其他--</option>
    </select>
    
    商品子类:
    <select name="sltSub" id="sltSub" onChange="ss2()">
    <option value="">--选择子类--</option>
    </select>
    <br>......
    <input type="button" onClick="showSele()" value="提交"/>
    </form>

    JS:

     

     

    <script type="text/javascript">
    //使用数组存储数据
    var agoods1=new Array('请选择','整机','数码产品','无线网','配件','耗材','软件','语音视频','办公设备','网络设备','机房布线','移动存储','通讯设备','显示设备','其他');
    var agoods2=new Array('--选择子类--','笔记本','笔记本配件','台式机','服务器','服务器配件','工作站','小型机','移动PC','平板电脑','网络电脑','数据相机','MP3','便携式DVD','数码学习机','数码摄像头','数码相机伴侣','MD播放器','滤镜镜头','多媒体硬盘播放','无线上网卡','无线网卡','CPU','内存','主板',' ','墨盒','纸张','操作系统', '办公软件','杀毒软件','视频会议','视频卡','投影机','打印机','扫描仪','交换机','集线器','测试仪','机房空调','闪存卡','移动硬盘','手机','电话机','液晶显示器','CRT显示器','游戏机','电池','音响');
    //声明一个arrayGoods对应,这个对象在new的时候指向一个数组,可通过arrayGoodsP['i']找到对应数组
    
    var arrayGoodsP=new Object();
    arrayGoodsP['1']=new Array('--选择子类--','15','16','17','18','19','20','21','22','23','24');
    arrayGoodsP['2']=new Array('--选择子类--','25','26','27','28','29','30','31','32','33');
    arrayGoodsP['3']=new Array('--选择子类--','34','35');
    arrayGoodsP['4']=new Array('--选择子类--','36','37','38');
    arrayGoodsP['5']=new Array('--选择子类--','40','41');
    arrayGoodsP['6']=new Array('--选择子类--','42','43','44');
    arrayGoodsP['7']=new Array('--选择子类--','45','46');
    arrayGoodsP['8']=new Array('--选择子类--','47','48','49');
    arrayGoodsP['9']=new Array('--选择子类--','50','51');
    arrayGoodsP['10']=new Array('--选择子类--','52','53');
    arrayGoodsP['11']=new Array('--选择子类--','54','55');
    arrayGoodsP['12']=new Array('--选择子类--','56','57');
    arrayGoodsP['13']=new Array('--选择子类--','58','59');
    arrayGoodsP['14']=new Array('--选择子类--','60','61','62');
    var result="";
     //该方法实现了商品大类与子类的联动
    	function ss()
    	{
    		
    		var sltp=document.getElementById("sltParent");
    		var slsb=document.getElementById("sltSub");
    		var sva=sltp.value;
    		slsb.options.length=1;
    		for(var i=0;i<arrayGoodsP[sva].length;i++)
    		{
    			
    			if(i==25)
    			{
    				continue;
    			}
    			if(i!=0)
    			{
    			 slsb.options[i]=new Option(agoods2[Number(arrayGoodsP[sva][i])-14],arrayGoodsP[sva][i]);
    			}
    			else
    			{
    			 slsb.options[i]=new Option(agoods2[0],'0');
    			}
    		}
    	}
    	function ss()
    	{
    		
    		var sltp=document.getElementById("sltParent");
    		var slsb=document.getElementById("sltSub");
    		var sva=sltp.value;
    		slsb.options.length=1;
    		for(var i=0;i<arrayGoodsP[sva].length;i++)
    		{
    			
    			if(i==25)
    			{
    				continue;
    			}
    			if(i!=0)
    			{
    			 slsb.options[i]=new Option(agoods2[Number(arrayGoodsP[sva][i])-14],arrayGoodsP[sva][i]);
    			}
    			else
    			{
    			 slsb.options[i]=new Option(agoods2[0],'0');
    			}
    		}
    	}
     //ss2()和showSele()方法实现提交时,显示对应选择的商品名称与编号
    
    
     function ss2()
    	{
    		var slsb2=document.getElementById("sltSub");
    		if(slsb2.value!="--选择子类--")
    		{
    			result=slsb2.value;
    		}
    	}
    	function showSele()
    	{
    		alert("您选择的商品为"+agoods2[Number(result)-14]+",商品的编号为"+result);	
    	}
    </script>function ss2()
    	{
    		var slsb2=document.getElementById("sltSub");
    		if(slsb2.value!="--选择子类--")
    		{
    			result=slsb2.value;
    		}
    	}
    	function showSele()
    	{
    		alert("您选择的商品为"+agoods2[Number(result)-14]+",商品的编号为"+result);	
    	}
    </script>


    其中new Option(agr,agr),第一个参数为text文本,第二参数为服务器返回的value值。比如 new Option("举例","0"),相对应的HTML

     

    就是<option value="0">举例</option>。
     

     

     

     

    展开全文
  • 如何实现两个下拉列表框的联动(选中一个可以在数据库中查询然后显示第二个,而且第二个是可选可编辑的)
  • 省市区(县)三级联动下拉列表源码,下载即可用。各浏览器基本都兼容,IE至少支持到8
  • 3. 第二下拉框里的值是需要写一写接口,做数据库的关联查询,查出第二的值返回一json 4. 当第一下拉框的值被改变,去发送一ajax请求,请求刚才写好的接口,把第一下拉框的值传进去,把ajax返回的结果...

    先概括总结

    1. 数据库中先配置好2个表的关联
    2. 第一个下拉框里的值是从数据库中取来的
    3. 第二个下拉框里的值是需要写一个写接口,做数据库的关联查询,查出第二个的值返回一个json
    4. 当第一个下拉框的值被改变,去发送一个ajax请求,请求刚才写好的接口,把第一个下拉框的值传进去,把ajax返回的结果,拼成下拉框的选项html

    这就完成了,把代码贴下

    template

    <tr>
                <td><label>选择环境:</label></td>
                <td><select name="order_server" id="order_server">
                    <option value="choice">请选择环境</option>
                    {% for env in env_list %}
                        <option value={{ env.env_id }}>{{ env.env_name }}</option>
                    {% endfor %}
                </select></td>
            </tr>
            <tr>
                <td><label>操作人员:</label></td>
                <td><select name="operator" id="id_operator">
                    <script type="text/javascript" src="{% static 'js/get_monitor_operator_by_env_name.js' %}"></script>
                </select></td>
            </tr>
    

    static/js

    $('#order_server').change(function () {
        var env_id = $(this).val()
        $.ajax({
            url: '../get_monitor_operator_info/',
            type: 'GET',
            data: {
                'env_id': env_id
            },
            dataType: "json",
            success: function (ret) {
                console.log(ret)
                var content = ''
                $.each(ret, function (i, item) {
                    console.log(i)
                    console.log(item)
                    content += '<option value=' + item.engineer_id + '>' + item.username + '</option>'
                })
                $('#id_operator').html(content)
            }
        })
    })
    

    urls

    from django.urls import path
    
    from tom_mail_manager import views
    
    urlpatterns = [
       
        path('get_monitor_operator_info/', views.get_monitor_operator_info, name='get_monitor_operator_info'),
    ]
    

    views

    def get_monitor_operator_info(request):
        if request.method == 'GET':
            env_id = request.GET.get('env_id')
            deploy = DeployInfoHelper(admin_ip, admin_port, admin_dbname, admin_dbuser, admin_dbpassword)
            json_info = deploy.get_env_name(env_id)
            return HttpResponse(json.dumps(json_info), content_type="application/json")
        return render(request, 'tommail/enterpriseMailMonitor.html')
    
    展开全文
  • 原生JS写的多级联动下拉列表联动级数可以自定义,不限级数。可用作省、市、区联动,或其他的多级分类选择。使用方法请参考demo文件。
  • wps 中 下拉列表和多级下拉列表的使用 ** 一,应用目的 期望: 第一列下拉列表选择完 人员类型之后 ,可以在 后面的列中自动 填充 人员对应的 薪资、 人员ID 、 备注信息等。 这样在制作表格时,尤其是在制作 报价...

    **

    wps 中 下拉列表和多级下拉列表的使用

    **

    一,应用目的

    在这里插入图片描述
    期望: 第一列下拉列表选择完 人员类型之后 ,可以在 后面的列中自动 填充 人员对应的 薪资、 人员ID 、 备注信息等。 这样在制作表格时,尤其是在制作 报价清单的时候,可以 极大的缩短工作效率。
    相当于 我们先把 一些重复使用的硬件列一个表格。 后面在制作硬件清单列表的时候, 通过选择硬件名称,后面就可以针对这个硬件,自动出现 单价 和 性能参数 等信息。

    这里面用到的关键技术就是下拉列表。

    二, 实现的步骤

    1, 在WPS excel 中 创建两个表单;
    在这里插入图片描述
    比如: sheet1 文件 是我们需要制作的实际的硬件清单。
    模板: 代表的是 我们自己已经提前制作好的 重复使用次数多的 硬件性能列表。

    2, 模板文件的创建

    在这里插入图片描述

    以上是我们 举例做的一个 模板文件。

    3, 在sheet 中 创建自己的 下拉别表 和 联动(自动填充的列表)

    在这里插入图片描述
    以上是一个 例子。

    (1)测试1 代表的列 ——我们期望使用的是 人员的下拉别表。 选中该列之后,
    在这里插入图片描述
    步骤: 数据—— 插入下拉列表—— 从单元格选择(也可以手动输入,后续再讲)

    选中从 单元格选择之后, 讲鼠标 点击WPS 列表 模板(这是自己起的名字,不是系统自带的模板),跳转到模板的页面

    整个选择 C 列(就是我们想用人员类型下拉列表对应的列)

    在这里插入图片描述

    在这里插入图片描述
    然后 在 sheet 中 的 选择框就会自动出现上面箭头所示的 。

    (2) 联动下拉菜单(关键的一步)

    1. 先在测试1 下面的第一个 空格里面 从下拉列表中 随便 选择一个选项,比如 项目总监。 然后 在 测试2 下面 的第一个表格 里面 插入 公式 VLookup
      在这里插入图片描述
      在这里插入图片描述

    函数参数详细讲解:

    (1)查找值: 可以直接用鼠标点击 测试1 下面的第一个格子 —— 这里对应的是 M3 ,
    注意: 需要我们自己 在前面 加一个 符号 $ ,(别问我原因,我也不知道)
    (2)数据表: 用鼠标定位到 模板的列表, 然后 全部 选中 我们需要的 四列(对应的是 从C 到 F ), 同样的 在选择的第一列 C 的前面 加上一个字符 $
    (3 列序数: 代表的 是我们想在当前这个 格子 里面 填充 查询表里面的第几列(从1开始数。)
    如下 我们 如果选择的是 4 , 就是 填充 对应 模板 数据列表 中的 第四列。
    (4) 匹配条件: 默认填写0 即可。 0 (false)代表的是精确查找。 true(>0)代表的是 模糊查找。

    在这里插入图片描述

    通过以上一系列操作, 基本上就可以实现 联动的效果。

    想象一个场景:

    你要做一个很大的 硬件清单列表, 突然 一个硬件的参数 或者报价 出现变化。 以往,我们就需要将所有相关的 这个硬件 找出来 ,然后 每个都修改一下 响应的参数。

    采用以上方法之后, 只需要在模板里面修改一次, 自己制作的硬件清单会自动全部修改——简直了。

    谨以此文章,献给 做报价清单的程序人员。 在程序员的眼里, 能省事的尽量省事去做,

    展开全文
  • 可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo
  • 很多时候在界面布局时我们会用到下拉列表,单独的一个列表与数据库的交互很简单,今天要记录的是当有多个下拉列表联动时,该怎样获取数据,即选择第一个下拉列表的值,动态的改变第二个下拉列表乃至更多列表的值。...

    很多时候在界面布局时我们会用到下拉列表,单独的一个列表与数据库的交互很简单,今天要记录的是当有多个下拉列表联动时,该怎样获取数据,即选择第一个下拉列表的值,动态的改变第二个下拉列表乃至更多列表的值。

    1、在jsp中定义第一个下拉列表,并且从servlet中获取list列表读取出option的value(此处关于EL表达式以及c标签的使用不在赘述)

    <select οnchange="getShoppe()" id="bra" name="brand" style="width: 75%;height: 40px; vertical-align: middle; line-height: 40px;">
    <option>选择您购买的品牌</option>
    <c:forEach var="brandL" items="<%=session.getAttribute("brandlist") %>">
    <option value="${brandL.name }" id="${brandL.code }">${brandL.name }</option>
    
    </c:forEach>
    </select>
    2、定义第二个下拉列表(这个下拉列表的option需要依赖第一个下拉列表的改变而改变)

    <select name="shop" id="shoppe" οnchange="getStaff()" style="width: 75%;height: 40px; vertical-align: middle; line-height: 40px;">
    </select>

    3、下拉列表的onchange()事件调用该方法(此方法中接收servlet传入的json数据,需导入json包在lib下)
     function getShoppe() {//如果第一个下拉列表的值改变则调用此方法  
       
            var code = $("#bra option:selected").attr("id");//得到第一个下拉列表的值  
            if(code!=null && "" != code&& -1 != code){  
                    //通过ajax传入后台,把orderTypeName数据传到后端  
                $.post("GetShoppeServlet",{code:code},function(data){  
                        var res = $.parseJSON(data);//把后台传回的json数据解析  
                        var option;  
                        option="<option>"+"选择您购买的专柜"+"</option>" ; 
                        $.each(res,function(i,n){//循环,i为下标从0开始,n为集合中对应的第i个对象  
                            option += "<option value='"+n.name+"'>"+n.name+"</option>"  
                        });  
                        $("#shoppe").html(option);//将循环拼接的字符串插入第二个下拉列表  
                        $("#shoppe").show();//把第二个下拉列表展示  
                });  
              
            }else {  
                $("#shoppe").hide();  
            }  
        }
    4、新建一个和方法中同名的servlet,根据数据库读出的数据,返回一个json对象

    HttpSession session=request.getSession();
    		
    		int code=Integer.parseInt(request.getParameter("code"));
    		System.out.println(code);
    		List<Scanf> shoppelist=scanfDao.getScanfShoppe(code);
    		session.setAttribute("shoppelist", shoppelist);
    		List<Scanf> l=(List<Scanf>)session.getAttribute("shoppelist");
    		//System.out.print(l.get(0).getName());
    	    out.print(JSON.toJSONString(l));  
    总的来说,我们要在页面中异步的实现两个甚至多个select的联动,需要在servlet中返回一个json的对象,然后返回给js进行解析后赋值给option





    展开全文
  • 用户选择第一个下拉列表框时,另外两个下拉列表框的值将随之变化;用户选择第二个下拉列表框时,第三个下拉列表框的值也将随之发生变化。  (2)在三个下拉列表框中,无论选择哪一个下拉列表框,都将各个下拉列表...
  • 下拉列表二级联动

    2012-12-09 11:35:56
    是一拉列列表的二级联动代码,大家可以参照一下
  • 最近发现CSDN上有很多人在询问 有关联动的下拉列表的问题,所以... 1.JavaScript实现,JS实现无非在效率上是最优的,而且用户体验性也很好,但是它的缺点就是两个下拉列表的值是固定死的,所以可扩展性和灵活度不够.下面是
  • Ajax实现java web 中下拉列表二级联动

    热门讨论 2010-11-24 15:15:19
    ajax 我们也就讲过一小例子,这是后来经老师指点后用老师的例子改的,希望对想实现二级联动的同学有所帮助.
  • 利用Javascript技术实现省市下拉列表联动
  • 中国行政区域二级联系菜单,根据上级行政区加载下级行政区列表 XML数据驱动,可自定义添加、删除,简易更新 支持回发恢复状态,已正确设定行政区可自动选定和加载各级行政区数据 其它说明: 应用网站必须存在行政...
  • 一 获取一级分类 1 组件数据定义 ...表单初始化时获取一级分类嵌套列表,引入subject api import subjectApi from '@/api/subject' 定义方法 // 获取课程分类列表 initSubjectList() { subjectApi.g
  • 两个下拉列表的内容相互对应,使主菜单对应其子菜单。
  • 实现两个下拉列表的级联选择功能(联动菜单) 省市联动即可: 例如:第一个下拉列表有选项:北京、河北、山东 当选中北京时,第二个下拉列表中显示:顺义、朝阳、海淀、丰台 当选中河北时,第二个下拉列表中显示...
  • <ItemStyle CssClass="dxgv"></ItemStyle> ;Container, "DataItem.PLANTKEY") %>'> 宋体"> <asp:ListItem Selected="True" Value="">---- ... %>' OnSelectedIndexChanged="ddl_e_week_p_...
  • 二级联动 下拉列表

    2021-01-21 11:02:07
    二级联动 下拉列表 需先选择英雄,才能在选择英雄的皮肤 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...二级联动<...--先创建两个下拉列表--> 请选择英雄 :
  • 级联关系存在于各种各样的业务场景中。如省市级联、部门级联、年级班级级联等等。在用Axure 9设计原型时,碰到这种级联关系的下拉选项,该如何操作呢?
  • 这是一关于.NET MVC 下拉两联动的例子,或者说小模板。为了让联动如何实现更加清晰,代码中没有用到数据库,而是使用类的初始化函数代替。例子中也有用到前台和后台的交互。
  • ABAP选择屏幕两个下拉列表联动

    千次阅读 2012-08-26 14:04:14
    REPORT ztest_call_prog. TYPE-POOLS vrm. " ListBox使用 DATA: name TYPE vrm_id,  list TYPE vrm_values,  value LIKE LINE OF list. TABLES: sscrfields. ...DATA: g_code TYPE sscrfie
  • 在我们平常填写一些信息时就会有省市联动,就是在第一个下拉列表中选择我们所在的省,后面一个下拉列表显示该省的所有城市。 既然是省市联动,我们就不能把数据直接写到网页上,我们应该通过第一个下拉列表的省动态...
  • Excel 多级联动下拉列表的实现

    万次阅读 热门讨论 2019-07-10 16:21:39
    核心就是两个步骤: 1、创建数据 2、引用数据 〇、先创建数据:也分两步 ①建表: 两个数据块,省市数据块,市县数据块。(为了介绍多种实现,用了两种排版,横版和竖版) ②将数据导入名称管理器【重要的...
  • 1、先拉两个下拉框; 2、选中第一个,给交互动作; 3、完事
  • 可能”极好的”又会带来很多的非议,但是我认为这确实很好,我看了大约20无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这我差不多搞了天,就是如果提交窗体后如何保持第二列表框的值,因为通过js 给...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,029
精华内容 2,011
关键字:

两个下拉列表联动