php datalist,表单系列之select与datalist

select

HTML5新属性

11

22

Explorer

Firefox

Chrome

Opera

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

定义

标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

用法

datalist具有模糊查询的作用。

//配合input框的list属性使用