select
HTML5新属性
<select id="select" multiple="true" size="20" form="false">
<optgroup label="num">
<option value="Internet Explorer">11</option>
<option value="Firefox">22</option>
</optgroup>
<optgroup label="browser">
<option value="Internet Explorer">Explorer</option>
<option value="Firefox">Firefox</option>
</optgroup>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
</select>
Select 对象方法
添加选项
var obj = document.getElementById('mySelect');
obj.add(new Option(key, value));
删除所有选项
var obj = document.getElementById('mySelect');
obj.options.length=0;
删除一个选项
var obj = document.getElementById('mySelect');
var index = obj.selectedIndex;
obj.options.remove(index);
获得选项的值或文本
var obj = document.getElementById('mySelect');
var index = obj.selectedIndex;
var val = obj.options[index].value;
var text = obj.options[index].text;
修改选项
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
obj.options[index]=new Option(new key, new value);
设置option被选中
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
obj.options[index].selected=true;
select样式
更改下拉箭头
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("../img/arrow.png") no-repeat scroll right center transparent; //用图片替代下拉箭头
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
Select 事件
onchange
onclick
datalist
定义
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
用法
datalist具有模糊查询的作用。
//配合input框的list属性使用
<input type="text" list="mydata" placeholder="热门电影排行" />
<datalist id="mydata">
<option label="Top1" value="让子弹飞">
<option label="Top2" value="非诚勿扰2">
<option label="Top3" value="大笑江湖">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value="初恋这件小事">
</datalist>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。