<select class="" id="location">
<option value="-1">please select...</option>
<option value="111" label="woshi">hello</option>
<option value="1111" label="woshi1">hello2</option>
</select>
<script type="text/javascript">
#select 实际上是HTMLSelectElement类型的一个实例
##method:
add(newoption, reloption)
remove(index)
##property:
{{boolean}} multiple
{{HTMLCollection}} options
{{integer}} selectedIndex -1表示没选中 size:可见行数
// type: 'select-one' || 'select-multiple'
##option 实际上是HTMLOptionElement的一个实例
property:
index
label
selected
text value
//var selectbox = document.form[0].location;
var selectbox = document.getElementById('location');
var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
var selectIndex = selectbox.options[0].index;
var label = selectbox.options[0].label;
//访问选中的项
//var selectedOption = selectbox.options[selectbox.selectedIndex];
//selectbox.selectedIndex = -1; //不选择任何项
//添加选项
var newOption = new Option('Option text', 'Option Value');
selectbox.add(newOption, undefined);
console.log('end');
//移除
var clearSelectbox = function () {
for (var i = 0; selectbox.options.length; i++) {
selectbox.remove(0);
}
};
//移动
//appendChild
//重排
var optionToMove = selectbox.options[1]; //第二项
//将第二项移动到第一项
//selectbox.insertBefore(optionToMove, selectbox.options[options.index - 1]);
//向后移动一项
//selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index + 2]);
//最后一项 移动到最后一项
//selectbox.insertBefore(selectbox.options[selectbox.options.length - 1], selectbox.options[optionToMove.index + 2]);
//将第二项移动到最后一项
//selectbox.insertBefore(optionToMove, selectbox.options[selectbox.options.length]);
selectbox.onchange = function () {
console.log('changeing in selectbox');
}
selectbox.onclick = function () {
console.log('clicking in selectbox');
}
selectbox.options[1].selected = true;
//selectbox.options[2].selected = true;