HTML中下拉框的简单介绍<Select><option>
1,下拉框的使用:
在很多地方能见到下拉框的使用,最常用的就是在填写地址的时候,用户自己选择地址。
2,效果演示:
3,代码演示:
下拉框主要用到<select>和<option>标签;
a,第一个下拉框的代码,第二个下拉框的内容是依赖于第一个下拉框的选择确定的
<select id="sid" onchange="selectcity()"><option>---请选择---</option><option>湖南</option><option>湖北</option><option>浙江</option><option>广东</option></select><select id="ssid"><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,总结:这些在以后都是从后台获得数据,在这里只是为了演示下拉框的使用。
HTML中下拉框的简单介绍<Select><option>相关推荐
- java select下拉标签_java中下拉框select和单选按钮的回显操作
前提: 1.下拉框select 请选择部门 selected="selected" >${department.department} 2.单选按钮radio的回显 chec ...
- web自动化测试第12步:selenium中下拉框的解决方法(Select)
在之前,遇到下拉框的时候我们可以用两次点击来选择我们需要的选项,不过对于下拉框,我们的webdriver中有封装的Select包单独对于下拉框有一套处理的方法,我们可以来学习一下,然后在测试的时候根据 ...
- 报表汇总工具FineReport中下拉框如何显示多列
报表汇总工具FineReport中下拉框如何显示多列 VALUE("ds1",1,2,$$$,1) 数据查询ds1中第1列的值等于当前值$$$的行的第2列取第1个值 点击下拉框控件 ...
- xd使用技巧_XD拉框助手怎么使用 XD拉框助手简单使用方法分享
XD拉框助手怎么使用?XD拉框助手是一款好用的PC端Adobe XD的拉框插件,通过本软件可以能够快速的生成折线图.柱状图.饼图.雷达图.全国各省市的地图,有的朋友可能还不知道应该如何使用?今天,小编 ...
- MVC中下拉框(DropDownList)的基本功能实现
MVC中下拉框(DropDownList)的基本功能实现 建立好数据库中TABLE后,通过Model,DataAccess,Business,Controller,最后到页面的顺序,在MVC中调用数据 ...
- c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
- java中下拉框select和单选按钮的回显操作
1.下拉框select的回显 <select name="departmentId" id="departmentId"><option va ...
- element中下拉框select在长页面滚动时,下拉弹框没有跟随下拉框跑路
1.需求: 在页面滚动过程中,弹框并没有跟着下拉框一起跑,一直固定在那个位置 2.修改: 在tamplate中: <el-col :span="10" class=" ...
- layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
最新文章
- python使用选择结构鉴别合法日期
- YOLOX——Win10下训练自定义VOC数据集
- telnet 22正常 ssh无法连接_Telnet咋就不安全了呢?带你来看用户名和密码
- mybatis连接oracle_Mybatis 系列 0:初恋Mybatis
- 入门 | 一文介绍机器学习中基本的数学符号
- 洛谷 P3732 [HAOI2017]供给侧改革【trie树】
- preprocessing.StandardScaler中fit、fit_transform、transform的区别
- 使用Docker部署SpringBoot
- 百度地图开发只显示网格不显示地图信息
- 面向对象三大特征:封装、继承、多态
- tinyxml库使用实例
- Rust: match 与ref
- PHP开票接口,云增值税发票API详情
- 计算机上怎么在表格输入分秒,excel2010中如何设置分秒格式显示单元格或数据?...
- Python爬虫入门教程 25-100 知乎文章图片爬取器之一
- linux开启443端口
- jQuery Fancybox插件介绍
- GIS理论常识——GeoJson和TopoJson
- python3 爬虫 爬取华为应用市场 APP应用评论(一)爬取全部评论——学霸君
- 小米 linux 内核面试,编译适配小米2S的CM Linux内核源代码及问题解决