<select name="r_house" id="r_house">
<option value="选项1">选项1</option>
<option value="选项2" selected>选项2</option><!--如果想直接在html中选定某项,给该项加个selected属性即可,不需要编程-->
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
</select>
<script>
window.onload=function(){
//如果一定要js代码实现,可以这样:
//方法一(假定选定第3项,下同):
r_house.value="选项3"
//方法二:
r_house.options[2].selected=true
//方法三:
r_house.children[2].selected=true
//方法四:
r_house.getElementsByTagName("option")[2].selected=true
//方法五:
r_house.querySelectorAll("option")[2].selected=true
//还有N多种方法此略
}
</script>
判断select选项中 是否存在Value="paraValue"的Item
向select选项中 加入一个Item
从select选项中 删除一个Item
删除select中选中的项
修改select选项中 value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
js 代码如下:
// 1.判断select选项中 是否存在Value="paraValue"的Itemfunction jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true
break
}
}
return isExit
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在")
} else {
var varItem = new Option(objItemText, objItemValue)
objSelect.options.add(varItem)
alert("成功加入")
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i)
break
}
}
alert("成功删除")
} else {
alert("该select中 不存在该项")
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1
for(var i = length i >= 0 i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText
break
}
}
alert("成功修改")
} else {
alert("该select中 不存在该项")
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false
for (var i = 0 i < objSelect.options.length i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true
isExit = true
break
}
}
//Show出结果
if (isExit) {
alert("成功选中")
} else {
alert("该select中 不存在该项")
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex
// 11.清空select的项
document.all.objSelect.options.length = 0