select元素的常用操作
添加option选项
selectEl:选择框元素
allOptions:选择框的所有选项
1.使用选择框的add()方法
selectEl.add(newOption, optionA)
selectEl.add(newOption, undefined)
2.使用DOM方法
newOption = document.createElement('option')
newOption.appendChild(document.createTextNode('F'))
newOption.setAttribute('value', 'f')
selectEl.appendChild(newOption)
3.使用option构造函数(IE8之前存在问题)
newOption = new Option('G', 'g')
selectEl.appendChild(newOption)
4.使用insertBefore()方法,可以将元素插入到指定位置
newOption = new Option('H')
var lastNode = selectEl.lastChild || allOptions[allOptions.length - 1]
selectEl.insertBefore(newOption, lastNode)
change事件
selectEl.onchange = function (event) {
var target = event.target
var curOption = allOptions[target.selectedIndex]
console.log(`selectedIndex的值:${target.selectedIndex}`)
console.log(`当前选中项在options集合中的索引:${curOption.index}\n当前选中项的标签:${curOption.label}`)
console.log(`当前选中项是否被选中:${curOption.selected}`)
console.log(`选中项的文本:${curOption.text}\n选中项的值:${curOption.value}`)
console.log(`选中项的下标:${selectEl.selectedIndex}`)
console.log(`选择框的类型:${selectEl.type}`)
console.log(`选择框可见的行数:${selectEl.size}`)
}
移除option选项
1.使用DOM的removeChild()方法
selectEl.removeChild(allOptions[0])
2.使用选择框的remove()方法
selectEl.remove(0)
3.使用DOM出现之前的遗留方式
selectEl.options[0] = null