码迷,mamicode.com
首页 > Web开发 > 详细

html学习总结之select控件的使用

时间:2017-10-01 23:07:42      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:options   logs   log   cte   常见   value   操作   option   服务   

select控件是表单中的很常见的控件,总结记录其使用方法:

1、在html中添加表单控件的代码:

1 请选择学历:
2   <select name="xueli" id="xueli">
3     <option value="00">未知</option>
4     <option value="01">初中</option>
5     <option value="02">高中</option>
6     <option value="03">中专</option>
7     <option value="04">大专</option>
8     <option value="05">大学</option>
9   </select>

使用<select>标签定义控件。使用<option>标签定义选项,value特性表达发送到服务器的值(上例中是00到05),选项的文本(上例中是未知到大学)在操作时显示。


 

2、获取当前所选项的索引、值和文本,动态增加可选项,删除可选项,枚举可选项的代码

//获取控件
var xl=document.getElementById("xueli");

//获取当前所选项目
alert(xl.selectedIndex);
alert(xl.options[xl.selectedIndex].value);
alert(xl.options[xl.selectedIndex].text);

//动态增加可选项目
xl.options.add(new Option("硕士","06"));
xl.options.add(new Option("博士","07"));

//删除可选项
xl.options.remove(xl.selectedIndex);

//枚举可选项
for(var p in xl.options){
  console.log(p,xl.options[p].value,xl.options[p].text);
}

 

html学习总结之select控件的使用

标签:options   logs   log   cte   常见   value   操作   option   服务   

原文地址:http://www.cnblogs.com/womenbuyiyang/p/7617983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!