<!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 src="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>