首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID。

    var options=new Array();
    $(document).ready(function(){
        //二级联动
        $('#ddlPages').children('option').each(function(i){
            options[i]='<option value="'+$(this).val()+'">'+$(this).text()+'</option>';
        });//将option列表放到数组里
        $('#ddlPages option:gt(0)').remove();    //清楚下拉
        $('#ddlSubsystems').bind('change',function(){        //注册事件
            var systemname=$('#ddlSubsystems option:selected').text();
            for(var j=0;j<options.length;j++){
                $('#ddlPages').append(options[j]);
            }    //option列表先初始化
            $('#ddlPages option:gt(0)').each(function(i){    //遍历排除
                var textname=$(this).text();
                var index=textname.indexOf('-'+systemname);
                if(index<0){
                    $(this).remove();
                }else{
                    $(this).text(textname.substring(0,index));
                }
            });
            $('#ddlPages').val(0);                            //默认选中第一行
        });
    });

Select标签下拉列表二级联动级联的更多相关文章

  1. 如何用jstl的select标签做二级联动下拉列表框??

    下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...

  2. select标签实现二级联动

    效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: <select id="select" class="sel"> ...

  3. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  4. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  5. <select>简易的二级联动

    1.首先是表单页面: <tr> <td align="right"> <label class="Validform_label" ...

  6. select菜单实现二级联动

    <tr> <th>执行人<b>*</b></th> <td> <select name="jdcld.ZXDW& ...

  7. select下拉二级联动

    function opt(){ var id = $("#ids").val(); $.ajax({   type: "POST",  url: "$ ...

  8. jQuery 1.3.2 简单实现select二级联动

    jQuery 1.3.2 简单实现select二级联动  复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  9. 通同select便签实现简单的二级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 在Windows Server 2012 R2上安装SharePoint 2013 with SP1失败,提示没有.net4.5的解决办法

    现在的Server用Windows Server 2012 R2的越来越多了,在部署带Sp1的SharePoint2013的时候,走完预安装工具后,点击setup提示缺少.net4.5. 其实Wind ...

  2. VMware网络设置详解

    标签: 网络vmware虚拟机web服务network 2009-05-19 22:23 27537人阅读 评论(7) 收藏 举报 分类: 基于类linux的开发(171) 我们知道,VMwareWo ...

  3. js版弹力球实例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹 ...

  4. Ubuntu 14.10安装手记

    1. Ubuntu系统安装 按照 www.linuxidc.com/Linux/2014-04/100369.htm 的安装方法即可. 配置文件有两个需要注意的地方.一.搞清楚电脑的分区表,c盘是hd ...

  5. ssh项目将搜索条件进行联动

    <s:form namespace="/tb" action="tenderList" name="searchForm" id=&q ...

  6. jquery生成元素注册事件无效,及事件委托的使用

    在页面加载完成之后,我们在页面操作用js生成html代码到页面,动态的添加元素带页面上 但是,这里可能很多人就必须碰到的一个问题就出现了,当你之后动态添加了元素到页面上,发现这个元素的绑定事件无效,如 ...

  7. JDK安装,环境配置

    在安装完jdk后,还需要对jdk的环境变量进行配置才能正常使用 1.右键选择 计算机→属性→高级系统设置→高级→环境变量 2.系统变量→新建 变量名:JAVA_HOME 变量值:(变量值填写你的jdk ...

  8. jQuery动态增删改查表格信息,可左键/右键提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. mysql命令总结

    统计全库数据量: use information_schema; SELECT TABLE_NAME, (DATA_LENGTH) as DataM , (INDEX_LENGTH) as Index ...

  10. 面试题目——《CC150》栈与队列

    面试题3.1:描述如何只用一个数组来实现三个栈. 方法1:固定分割 方法2:弹性分割(较难) package cc150; public class ArrayStack { public stati ...