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

Posted 2020-10-09

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);
}