关于 select

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

原文地址:https://www.cnblogs.com/leamiko/p/2740319.html