html的下拉框用什么标签实现_取消下拉框

html的下拉框用什么标签实现_取消下拉框下拉框在生活中应用很广

大家好,又见面了,我是你们的朋友全栈君。

1,下拉框的使用:

在很多地方能见到下拉框的使用,最常用的就是在填写地址的时候,用户自己选择地址。

2,效果演示:

html的下拉框用什么标签实现_取消下拉框html的下拉框用什么标签实现_取消下拉框html的下拉框用什么标签实现_取消下拉框

3,代码演示:

下拉框主要用到<select>和<option>标签;

a,第一个下拉框的代码,第二个下拉框的内容是依赖于第一个下拉框的选择确定的

	<select  id="sid" onchange="selectcity()">
   			<option>---请选择---</option>
   			<option>湖南</option>
   			<option>湖北</option>
   			<option>浙江</option>
   			<option>广东</option>
   	</select>

 

b,对一个下拉框的选项实行监听要οnchange=”selectcity()”触发事件,具体的JavaScript代码如下:

 

(这个主要就是二级联动
1,采用<slelect>标签《option》写好,根据写好的,函数里面写一个二维的数组,一一对应,(以后这些数据从后台传过来,这里为了演示,写死了)
2,需要主要的 触发时间的函数是 onchang()函数,用到select对象中的selectedIndex获得index索引,从二维数组中找到,从而添加到select中
   3 ,  注意的是,要先移除,后添加,不然会一直存在,用到select的options对象长度,然后每次移除第一个—–或者  直接设置长度为1就可以;)

 

<script type="text/javascript">
		function selectcity(){
			var citys=[["长沙","益阳","常德","株洲","张家界"],
						["宜昌","武汉","荆门","厂门"],
						["杭州市","宁波市","温州市","嘉兴市"],
						["广州","东莞","深圳","珠海"]
			];
			var index1=document.getElementById("sid").selectedIndex;//获得用户在省份组合框所选的选项序号  获得所选项的序列号,方便匹配上面二维数组添加
			var option1=document.getElementById("ssid");//添加到该节点下,需要一一循环
			option1.options.length=1;//直接设置总长度为1,留一个《请选择》,直接设置长度为1,,可以省去很多移除元素的麻烦
			
			for(var x=0;x<citys[index1-1].length;x++){//citys是一个二维数组  lenth citys[index1]
				var opt=document.createElement("option");
				opt.innerHTML=citys[index1-1][x];
				option1.appendChild(opt);
			}
		}
</script>

c,对于中间的移除第二个下拉框的元素,除了上面直接设置长度为1,还可以一一去移除,方法如下:

 获得ssid里面的所有内容,obj.options();然后一一移除

var option1=document.getElementById("ssid");
//添加到该节点下,需要一一循环
var len=option1.options.length;//二级里面所有的内容的长度
for(var x=0;x<len;x++){
				option1.removeChild(option1.options[0]);//每次移除第0个
			}

4,总结:这些在以后都是从后台获得数据,在这里只是为了演示下拉框的使用。

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124993.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python获取当前时间的时间戳_python精确到毫秒时间戳

    python获取当前时间的时间戳_python精确到毫秒时间戳在Python中可以使用来自模块time、datetime或calendar的函数来获取当前时间戳,代码语句如【importtime;ts=time.time()print(ts)】。在Python中,有多种方法可以获得当前时间戳。如果希望在Python中获得时间戳,可以使用来自模块time、datetime或calendar的函数。使用模块time模块time是提供各种与时间相关的功能。…

  • APACHE 安装出错 configure: error: Cannot use an external APR with the bundled APR-util

    APACHE 安装出错 configure: error: Cannot use an external APR with the bundled APR-util

  • 什么是draw call_unity drawcall优化

    什么是draw call_unity drawcall优化drawcall是openGL的描绘次数(directX没怎么研究,但原理应该差不多)一个简单的openGL的绘图次序是:设置颜色→绘图方式→顶点座标→绘制→结束。每帧都会重复以上的步骤。这就是一次drawcall如果有两个model,那么需要设置颜色→绘图方式→顶点座标A→绘制→结束。设置颜色→绘图方式→顶点座标B→绘制→结束。两次drawcalls;也就是说在ope

  • mysql之jdbc

    mysql之jdbcJDBCjava数据库连接用来操纵mysql数据库服务器的一套api接口。大部分是接口。javajdbc各种关系数据库mysqloraclesqlserverdb2jdbc操作m

  • googlenet网络模型简介_网络参考模型

    googlenet网络模型简介_网络参考模型一、GoogleNet模型简介  GoogleNet和VGG是2014年imagenet竞赛的双雄,这两类模型结构有一个共同特点是godeeper。跟VGG不同的是,GoogleNet做了更大胆的网络上的尝试而不是像VGG继承了Lenet以及AlexNet的一些框架,该模型虽然有22层,但大小却比AlexNet和VGG都小很多,性能优越。深度学习以及神经网络快速发展,人们容易通过更高性能的

  • java中类与对象的详解

    java中类与对象的详解

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号