联动菜单的设置--jQuery

来源：互联网发布：sql server 2017 64位编辑：程序博客网时间：2024/06/09 21:36
jsp页面：
<%@ page contentType="text/html; charset=UTF-8" %><%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %><portlet:defineObjects /><%  String basePath = renderRequest.getContextPath();%><html>    <head>      <title>联动菜单</title>      <meta charset="utf-8"/>     <script type="text/javascript" src="<%=basePath%>/js/jquery-1.11.1.js"></script>       </head>    <script type="text/javascript">      //事先预置好每个省所对应的市      //0-无  1-山东  2-浙江  3-江苏      var cities  = [        ["请选择"],        ["青岛","济南","烟台"],        ["杭州","宁波","温州"],        ["南京","无锡","苏州"],       ["巴中","成都","达州"]    ];    //联动菜单的切换    function change(){  //获取省的值  var pindex = $("#provice").val();  //获取市节点  var detailDom = $("#city");  //清空(从第二个开始，第一个请选择保留)  $("#city").find("option:gt(0)").remove();  if(pindex == 0){//若省为"请选择"，则市也为请选择  return;  }  var s = cities[pindex];  for(var i=0;i<s.length;i++){   var $p = $("<option></option>");      //给option元素添加value属性     $p.attr("value",i+1);  $p.html(s[i]);  detailDom.append($p);    }   }    //页面加载完毕之后要求 省-四川  市-成都    function tran(){    //将数据定位到企业类型    var num1 = "社团法人";//假设是从数据库里面获得的数据    var options1 = $("#organType option");    for(var i=0;i<options1.size();i++){  if(num1 == options1.eq(i).text()){  options1.eq(i).attr("selected",true);  break;  }  }        var num2 = "四川省";    var num3 = "成都";    var index = 0;//用于关联    //将数据定位到省    var options2 = $("#provice option");    for(var i=0;i<options2.size();i++){  if(num2 == options2.eq(i).text()){  options2.eq(i).attr("selected",true);  index= i;  break;  }  }    var cityList = cities[index];//该省所对应的所有市    for(var i=0;i<cityList.length;i++){    var $p = $("<option></option>");  $p.attr("value",i+1);  $p.html(cityList[i]);  $("#city").append($p);if(num3 == cityList[i]){$p.attr("selected",true);  }    }        }  </script>    <body>    <p>(1)：假设数据库中  企业类型=社团法人</p>  <p>(2)：假设数据库中  省=四川  市=成都</p>  <p>要求：页面加载完毕的时候，刷新页面后下拉选显示以上的数据</p>  <hr>  <button onclick="tran();">跳转</button>  <hr>    企业类型：    <select id="organType" name="organType"><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></select><hr>    省:      <select id="provice" onchange="change();"><!--若两次都选中山东省则事件不触发 -->        <option value="0">请选择</option>        <option value="1">山东省</option>        <option value="2">浙江省</option>        <option value="3">江苏省</option>        <option value="4">四川省</option>      </select>                市:      <select id="city">        <option>请选择</option>      </select>    </body>  </html>
-----------------------------------------------------------------------------
初始页面：
单击按钮后的显示页面：
阅读全文
0 0