• 二级联动菜单


    给每个市一个id,然后用onchange事件当一级联动改变时触发,然后拿到当前的id,去二级联动的Json里面找对应的value对应的列表,添加进去就行了,三级联动的原理也是这个
    <!
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> <script type="text/javascript"> //定义的一个数组 var city=[ ["北京","天津","上海","重庆"], ["南京","苏州","南通","常州"], ["福州","福安","龙岩","南平"], ["广州","潮阳","潮州","澄海"], ["兰州","白银","定西","敦煌"] ]; function getCity(){ //下拉框值改变的时候就执行getCity方法 var sltProvince=document.getElementById("province"); //获取id为“province”的元素 var sltCity=document.getElementById("city"); //获取id为“city”的元素 //sltProvince.selectedIndex-1表示获取当前province这个下拉框选中项的索引 //city[sltProvince.selectedIndex-1]表示city数组中的第几个元素 var provinceCity=city[sltProvince.selectedIndex-1]; sltCity.length=1; //通过遍历循环来给city这个下拉框设置选项 for(var i=0;i<provinceCity.length;i++){ sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]); } } </script> </head> <body> <form action="somepage.asp" name="theForm"> <select name="province" id="province" onchange="getCity()"> <option value="0">请选择所在省份</option> <option value="直辖市">直辖市</option> <option value="江苏省">江苏省</option> <option value="福建省">福建省</option> <option value="广东省">广东省</option> <option value="甘肃省">甘肃省</option> </select> <select id="city" name="city"> <option value="0">请选择所在城市</option> </select> </form> </body> </html>
  • 相关阅读:
    设置通过数字证书方式登录远程连接Linux服务器,禁止root账户远程密码方式远程连接服务器
    Windows server 2003 粘滞键后门+提权
    CVE-2017-7494复现 Samba远程代码执行
    SQL盲注学习-时间型
    SQL盲注学习-布尔型
    关于绿盟RSAS使用时遇到的问题
    SQL注入学习
    CentOS7,zabbix3.4通过,zabbix-Java-gateway监控Tomcat
    (转)输入pipt提示:AttributeError: 'module' object has no attribute 'HTTPSConnection'
    pip安装cx_Oracle报错:error code 1 in /tmp/pip-build-root/cx-Oracle
  • 原文地址:https://www.cnblogs.com/yangzailu/p/5829419.html
Copyright © 2020-2023  润新知