selectoption详解

一、selectoptions

在HTML中，经常需要在表单中添加下拉框，而标签就是用来定义下拉框的。而标签需要配合标签使用，而selectoptions数组就是用来获取一个标签中包含的所有标签的集合。

var sel = document.getElementById("mySelect");
var options = sel.options;
for(var i=0; i<options.length; i++) {
    console.log(options[i].value);
}

二、selectoption属性

每个标签都有相关属性，比如value、label、selected等等。而这些属性可以通过selectoption对象的属性来获取。使用option对象的value来获取选中的选项的值。

var sel = document.getElementById("mySelect");
var selectedOption = sel.options[sel.selectedIndex];
console.log(selectedOption.value);

三、selectoption1-3

在设置标签的多个标签时，可以使用selectoptions数组中的下标来获取每个标签对应的selectoption对象。

var sel = document.getElementById("mySelect");
var option1 = sel.options[0];
var option2 = sel.options[1];
var option3 = sel.options[2];
console.log(option1.value, option2.label, option3.selected);

四、获取select的option值

可以通过selectoptions数组来获取标签中每个标签的值。

var sel = document.getElementById("mySelect");
var options = sel.options;
for(var i=0; i<options.length; i++) {
    console.log(options[i].value);
}

五、option, select, select选中触发事件

在使用标签时，我们可能需要通过option或select来触发一些事件，比如当选项改变时触发change事件。

var sel = document.getElementById("mySelect");
sel.addEventListener("change", function() {
    console.log(sel.value);
});