精华内容
下载资源
问答
  • HTML二级联动下拉列表框的实现,如选择 省,市.zip
  • 下拉列表二级联动

    2012-12-09 11:35:56
    这个是一个拉列列表二级联动代码,大家可以参照一下
  • 本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
  • 二级联动 下拉列表

    2021-01-21 11:02:07
    二级联动 下拉列表 需先选择英雄,才能在选择英雄的皮肤 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级联动</title> </head> <...

    二级联动 下拉列表 需先选择英雄,才能在选择英雄的皮肤
    html页面

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>二级联动</title>
    	</head>
    
    	<body>
    		<form action="#" method="post">
    		<!--先创建两个下拉列表-->
    			请选择英雄 : <select name="hero" id="hero" onchange="skinA()"></select>
    
    			请选择皮肤 : <select name="skin" id="skin">
    				<option value="">请选择皮肤</option>
    			</select>
    		</form>
    	</body>
    </html>
    

    js代码

    	<script>
    		//创建英雄库
    		var heroArry = ["请选择英雄", "诺手", "小法", "厄加特"];
    		//创建英雄皮肤库
    		var skinArry = [
    			["请选择皮肤"],
    			["请选择皮肤", "生化骑士", "勇敢的心(两周年限定)", "灌篮高手"],
    			["请选择皮肤", "白魔法师 维迦", "魔导绅士 维迦", "永恒之森 维迦"],
    			["请选择皮肤", "深渊巨蟹 厄加特", "电锯狂人 厄加特 ", "战地机甲 厄加特"]
    		];
    		//获取到英雄的下拉列表
    		var hero = document.getElementById("hero");
    		//得到英雄皮肤的下拉列表
    		var skin = document.getElementById("skin");
    		skin.style.width = "120px";
    		//一级列表最先载入页面
    		window.onload = function heroA() {
    
    			//获取长度,一共需要多少个子选项
    			hero.length = heroArry.length;
    			//获取子选项数组
    			let op = hero.options;
    			for(let i = 0; i < op.length; i++) {
    				op[i].value = heroArry[i];
    				op[i].text = heroArry[i];
    			}
    			//当英雄下拉列表的索引为0时,禁用皮肤的下拉列表
    			forbidden();
    		}
    
    		//给英雄皮肤赋值
    		function skinA() {
    			forbidden();
    			//获取当前选中的字列表的索引值
    			let index = hero.selectedIndex;
    			//			console.log(index);
    			//根据这个索引值,得到英雄皮肤库的数组
    			let heroSkinArry = skinArry[index];
    
    			//这只皮肤下拉列表的个数
    			skin.length = heroSkinArry.length;
    			//获得下拉列表的数组
    			let op = skin.options;
    			//
    
    			//遍历皮肤 向英雄皮肤的下拉列表里添加值
    			for(let i = 0; i < op.length; i++) {
    				op[i].value = heroSkinArry[i];
    				op[i].text = heroSkinArry[i];
    			}
    			//将每个的第一个选项加上selected,每次默认选择第一个
    			op[0].selected = "selected";
    			//			console.log(op[0]);
    		}
    		//判断一级列表的索引,为索引值0时,代表请选择英雄,二级列表不可选择
    		function forbidden() {
    			if(hero.selectedIndex == 0) {
    				skin.disabled = true;
    			} else {
    				skin.disabled = false;
    			}
    		}
    	</script>
    

    效果图
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 用ajax实现的jsp二级联动下拉列表

    热门讨论 2008-12-24 11:36:03
    用ajax实现的jsp二级联动下拉列表,使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中,就一个字------烦
  • 二级联动下拉列表JS+html实现

    千次阅读 2015-06-19 14:32:58
    例子: This is a test! 请选择 脚本语言 ...//获取一菜单长度 var select1_len = document.frm.s1.options.length; var select2 = new Array(select1_len); //把一菜单都设为数组 for (i=0;
    例子:
    
    <html>
    <head>
    <title>This is a test!</title>
    </head>
    <body>
    <form name="frm">
    <select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
    <option selected>请选择</option>
    <option value="1">脚本语言</option>
    <option value="2">高级语言</option>
    <option value="3">其他语言</option>
    </select>

    <select name="s2">
    <option value="请选择" selected>请选择</option>
    </select>
    </form>
    <script language="javascript">
    //获取一级菜单长度
    var select1_len = document.frm.s1.options.length;
    var select2 = new Array(select1_len);
    //把一级菜单都设为数组
    for (i=0; i<select1_len; i++)
    { select2[i] = new Array();}
    //定义基本选项
    select2[0][0] = new Option("请选择", " ");

    select2[1][0] = new Option("PHP", " ");
    select2[1][1] = new Option("ASP", " ");
    select2[1][2] = new Option("JSP", " ");

    select2[2][0] = new Option("C/C++", " ");
    select2[2][1] = new Option("Java", " ");
    select2[2][2] = new Option("C#", " ");

    select2[3][0] = new Option("Perl", " ");
    select2[3][1] = new Option("Ruby", " ");
    select2[3][2] = new Option("Python", " ");
    //联动函数
    function redirec(x)
    {

    var temp = document.frm.s2;

    temp.length = 0;//清除s2内容 

    for (i=0;i<select2[x].length;i++)
    { temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
    temp.options[0].selected=true;
    }
    </script>
    </body>
    </html>
    展开全文
  • 二级联动下拉列表

    2020-07-30 21:30:44
    二级联动下拉列表 用到JavaScript和HTML JavaScript里用到了DOM和事件和函数和分支结构和关系运算符 HTML用到表单标签的下拉列表标签 <!DOCTYPE html> <html> <head> <meta charset="utf...

    二级联动下拉列表 

    看了好多二级联动发现都用数组遍历所以试着不用数组锻炼自己的算法

    用到JavaScript和HTML
    JavaScript里用到了DOM和事件和函数和分支结构和关系运算符
    HTML用到表单标签的下拉列表标签

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>省市二级联动</title>
    		<script type="text/javascript">
    			function demo(){
    				//通过id属性获取select标签对象
    				var obj = document.getElementById("d");
    				//select标签对象调用value方法获取框体的内容
    				var s = obj.value;
    				//用分支结构if else判断是否是对应的value值
    				if( s == "海南省"){
    				//是则通过标签名和下标获取市区列表然后执行用DOM改变原有的市区列表
    					var s = document.getElementsByTagName("select")[1];
    					s.innerHTML = "<select><option>东方市</option><option>海口市</option><option>三亚市</option><option>儋州市</option></select>";
    				}else if( s == "江西省"){
    					var s = document.getElementsByTagName("select")[1];
    					s.innerHTML = "<select><option>南昌市</option><option>景德镇市</option><option>上饶市</option><option>赣州市</option></select>"
    				}else if( s == "北京市"){
    					var s = document.getElementsByTagName("select")[1];
    					s.innerHTML = "<select><option>朝阳区</option><option>海淀区</option><option>丰台区</option><option>顺义区</option><option>昌平区</option></select>"
    				}else if( s == "河北省"){
    					var s = document.getElementsByTagName("select")[1];
    					s.innerHTML = "<select><option>石家庄</option><option>保定市</option><option>秦皇岛</option><option>唐山市</option><option>邯郸市</option></select>"
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<!--下拉列表的内容改变用onchange内容改变事件调用对应的函数demo -->
    		<select id="d" onchange="demo()">
    			<option>请选择省/市</option>
    			<option>江西省</option>
    			<option>海南省</option>
    			<option>北京市</option>
    			<option>河北省</option>
    		</select>
    		<select >
    			<option>请选择市/区</option>
    		</select>
    	</body>
    </html>
    

    本人高职萌新一个希望和大家一起交流学习

    展开全文
  • 一、要实现的效果 二、HTML代码 三、js代码 1、利用字面量声明数组的方式——创建省份数组 2、利用构造函数声明的方式——创建每个省下面的城市(未一一例举完毕...6、实现一级省份改变,二级城市跟着联动改变 ...

    一、要实现的效果
    在这里插入图片描述
    二、HTML代码
    在这里插入图片描述

    三、js代码
    1、利用字面量声明数组的方式——创建省份数组
    在这里插入图片描述
    2、利用构造函数声明的方式——创建每个省下面的城市(未一一例举完毕,请自行补充)
    在这里插入图片描述
    3、js中获取到html的两个下拉菜单并且设置样式
    在这里插入图片描述
    4、一级下拉菜单添加省份
    在这里插入图片描述
    5、二级下拉添加城市菜单
    在这里插入图片描述
    6、实现一级省份改变,二级城市跟着联动改变
    在这里插入图片描述

    展开全文
  • Option(text, value) ,接受两个参数:text(文本)和value(值),第个参数可选。 此构造函数会创建一个Object实例,但是兼容DOM的浏览器会返回一个 <option> 元素,所以可以调用 appendChild() 将新创建的...
  • js下拉列表二级联动

    万次阅读 多人点赞 2018-01-20 09:20:59
    学了JS也有一段时间了,今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动,就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有两个下拉列表,第一列表是选择省份,...
  • 先看一下简单的效果 ...html部分 (下拉框中value的数值我是根据数据库中取出来) 城市 <select name=city lay-filter=province> <option xss=removed></option> 北京市 天津市</o
  • 原生js实现二级联动下拉列表菜单

    千次阅读 2017-03-04 15:27:35
    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下:   var deviceNotExist = true;//防止数据重复 if(data.code == 0) { //查询成功 var...
  • AJAX的核心是JavaScript对象XMLHttpRequest。...本文就以二级联动下拉列表为例: 获取AJAX对象js代码: function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }cat...
  • HTML的select标签二级联动

    千次阅读 2020-07-09 10:26:06
    说明:级联下拉列表其实就是一级标签发生改变时(onchenge事件),二级标签随之改变。其中最重要的时把key和value放入select下的option. . 直接上代码,霍霍霍霍 <!doctype html> <html> <head> ...
  • html中的二级联动与获取下拉框的值

    千次阅读 2019-06-14 20:05:59
    二级联动 1.普通的下拉框 水果: <select> <option>香蕉</option> <option>苹果</option> <option>西瓜</option> <option selected="selected">草...
  • Ajax二级联动下拉列表

    2019-09-23 01:57:11
    //下拉列表改变时的操作 function proChange(objVal ){ alert ("proChange:"+ objVal ); createXMLHttpRequest() ;// document.getElementById ("city").length=1;//根据ID获取指定元素,并赋值 ...
  • JavaScript实现二级联动下拉菜单

    千次阅读 2019-09-19 08:08:10
    最近学习前端js,做了一个二级联动下拉菜单。二级下拉菜单的内容随着一级下拉菜单选项的更改而更改。菜单的内容是手动存在js的数组里的,随便写了几个数据。 效果图: 实现源码: <!DOCTYPE html> <...
  • HTML内容: <li>...一分类:</span> <select name="yjid" class="yjid"> <option value="">---所属分类---</option> <volist name="list" id="vo"> ...
  • 本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考。具体如下: 效果图:   具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb...
  • 省市二级联动.html

    2020-07-30 21:09:49
    省市二级联动用到JavaScript和HTML JavaScript里用到了DOM和事件和函数和分支结构和关系运算符 HTML用到表单标签的下拉列表标签
  • 简单的下拉列表二级联动、省市

    千次阅读 2020-04-24 17:16:30
    完整的HTML <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8" /> <title>注册</title> <meta name="vi...
  • 二级联动下拉列表(select),都是从数据库中取值,其中第二级为可多选列表(multiple).若要实现二级也是下拉菜单,可以将multiple改了即可。<html><head><meta ...
  • 本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉二级菜单,并不是...
  • jquery二级联动下拉菜单

    千次阅读 2017-06-15 11:36:23
    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 先看下效果 大类:  前端技术 程序开发 ...
  • NULL 博文链接:https://nkliuliu.iteye.com/blog/983020
  • 需求:选择省份时右侧自动变为相应省份下的城市列表&lt;!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&...

空空如也

空空如也

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

html二级联动下拉列表