獲取和設置select的選中項的值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取select的选中项的值</title>
</head>
<body>
<select id="select0">
<option value="0">请选择选项</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
<option value="5">选项五</option>
</select>
</body>
</html>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-2.1.1.min.js"></script>
<script>
window.onload=function(){
var tags=document.getElementsByTagName("select");
//通过javascript来获取select的选中项【】
var s=document.getElementById("select0");
s.selectedIndex=2;//设置选中项的索引
var index= s.selectedIndex;//获取选中项的索引
console.log(s.options[index].value);//输出选中项的值：value=3
console.log(s.options[index].text);//输出选中项的option里面的值：选项三
//通过下面方法也可以获取下面的值
var selectedValue=document.getElementById("select0").value;
console.log(selectedValue);
//通过jquery方法去设置和获取
console.log($("#select0").find("option:selected").text());//得到选中的option的里面的text
console.log($("#select0").val());//得到选中的值
$("#select0").val(1);//设置选中的值
console.log($("#select0").val());
//jquery和javascript的结合使用
var sIndex=$("#select0").get(0).selectedIndex;
//根据text=‘选项四’，来选中该项
$("#select0 option[text='选项一']").attr("selected","true");
$("#select0 option[value='2']").remove();//删除value='2'的选项删除
//把除了第一项的其他项都删除
$("#select0 option[value!='0']").remove();//可用于在多个选择框相互关联，然后当其中一个选项框开始选中时，清空另一个选项框。
};
</script>
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
