表單系列之select與datalist

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>