专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

HTML中下拉框的简略介绍<Select><option>

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
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>
b,对一个下拉框的选项实行监听要onchange="selectcity()"触发事件,具体的JavaScript代码如下:

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

<span style="white-space:pre"></span><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();然后一一移除

<span style="white-space:pre">var option1=document.getElementById("ssid");//添加到该节点下,需要一一循环</span>
<span style="font-family: Arial, Helvetica, sans-serif;"></span><span style="font-family: Arial, Helvetica, sans-serif;">var len=option1.options.length;//二级里面所有的内容的长度</span>
for(var x=0;x<len;x++){option1.removeChild(option1.options[0]);//每次移除第0个}
4,总结:这些在以后都是从后台获得数据,在这里只是为了演示下拉框的使用。

版权声明:本文为博主原创文章,未经博主允许不得转载。希望大家多指教指教

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: