新手编程1001问（1）
Q：JavaScript或JQuery如何获取选中的文本和值？
A：JS或JQuery运行于浏览器，能够很方便的获取用户在网页中选中的下拉框的文本和值。示例代码如下：
<!-- 页面上的select对象 -->
<select id="mySelect" name="mySelect" onchange="getMyCheck()">
<option value="0">请选择...</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
一、原生JavaScript方法：
//获取页面中的select对象
var myselect = document.getElementById("mySelect");
方法一：
//获取被选中的索引
var index = myselect.selectedIndex;
//获取被选中的值
var myvalue = myselect.options[index].value;
//获取被选中的文本
var mytext = myselect.options[index].text;
方法二：
for (var i = 0; i < myselect.length; i++) {
if (myselect.options[i].selected == true)
{
var myvalue = myselect.options[i].value;
var mytext = myselect.options[i].text;
}
}
//显示获取的结果
alert("值：" + myvalue + " 文本：" + mytext);
二、JQuery方法：
//获取mySelect选择的Value
var myvalue = $("#mySelect").val();
//获取mySelect选择的Text
var mytext = $("#mySelect").find("option:selected").text();
//获取Select选择的索引值
var myIndex = $("#mySelect").get(0).selectedIndex;
//显示获取的结果
alert("值：" + myvalue + " 文本：" + mytext + " 索引值：" + myIndex);
除了获取选中的值和文本，JQuery还能方便地对Select下拉框进行添加、删除、清空、设置选中的项等操作。示例代码如下：
//添加一个项（选项四）
$("#mySelect").append("<option value='4'>选项四</option>");
//删除值等于1的项
$("#mySelect option[value='1']").remove();
//再添加三个项
$("<option value='5'>选项五</option><option value='6'>选项六</option><option value='7'>选项七</option>").appendTo("#mySelect")
//设置索引二项（索引值=1）为选中项
$("#mySelect").get(0).selectedIndex = 1;
//设置值为3的为选中项
$("#mySelect").val(3);
//清空下拉框
$("#mySelect").empty();
经测试通过的网页全部源码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Script/jquery-1.9.1.min.js"></script>
<title>Index</title>
</head>
<script type="text/javascript">
//JS原生方法
function getMyCheck()
{
//获取select对象
var myselect = document.getElementById("mySelect");
//获取被选中的索引
var index = myselect.selectedIndex;
//获取被选中的值
var myvalue = myselect.options[index].value;
//获取被选中的文本
var mytext = myselect.options[index].text;
for (var i = 0; i < myselect.length; i++) {
if (myselect.options[i].selected == true)
{
var myvalue = myselect.options[i].value;
var mytext = myselect.options[i].text;
}
}
// 获取最大索引
var maxIndex = myselect.length - 1;
//显示获取的结果
alert("值：" + myvalue + " 文本：" + mytext + " 最大的索引值" + maxIndex);
}
//Jquery方法
$("doxcument").ready(function () {
//获取选中的值
$("#test0").click(function () {
//获取Select选择的Value
var myvalue = $("#mySelect").val();
//获取Select选择的Text
var mytext = $("#mySelect").find("option:selected").text();
//获取Select选择的索引值
var myIndex = $("#mySelect ").get(0).selectedIndex;
//显示获取的结果
alert("值：" + myvalue + " 文本：" + mytext + " 索引值：" + myIndex);
});
//添加一个项（选项四）
$("#test1").click(function () {
$("#mySelect").append("<option value='4'>选项四</option>");
alert("已添加");
});
//删除值等于1的项
$("#test2").click(function () {
$("#mySelect option[value='1']").remove();
alert("已删除");
});
//再添加三个项
$("#test3").click(function () {
$("<option value='5'>选项五</option><option value='6'>选项六</option><option value='7'>选项七</option>").appendTo("#mySelect")
alert("已添加");
});
//设置索引二项（索引值=1）为选中项
$("#test4").click(function () {
$("#mySelect ").get(0).selectedIndex = 1;
alert("已设置");
});
//设置值为3的为选中项
$("#test5").click(function () {
$("#mySelect ").val(3);
alert("已设置");
});
//清空下拉框
$("#test6").click(function () {
$("#mySelect").empty();
alert("已清空");
});
});
</script>
<body>
<div style="margin:20px;">
<b>JS如何获取选中的值和文本？</b>
<br /><br />
<select id="mySelect" name="mySelect" onchange="getMyCheck()">
<option value="0">请选择...</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<br /><br />
<span id="test0" style="cursor:pointer;">Jquery获取值和文本</span>
<br /><br />
<span id="test1" style="cursor:pointer;">添加一个项（选项四）</span>
<br /><br />
<span id="test2" style="cursor:pointer;">删除值等于1的项</span>
<br /><br />
<span id="test3" style="cursor:pointer;">再添加三个项（选项五、选项六、选项七）</span>
<br /><br />
<span id="test4" style="cursor:pointer;">设置索引二项（索引值=1）为选中项</span>
<br /><br />
<span id="test5" style="cursor:pointer;">设置值为3的为选中项</span>
<br /><br />
<span id="test6" style="cursor:pointer;">清空下拉框</span>
</div>
</body>
</html>
将以上源码复制粘贴到记事本，保存为html格式，即可在浏览器中打开测试。需要注意的是，JQuery运行需要下载jquery程序文件，本文案例使用的jquery-1.9.1.min.js版本，读者可在网上下载其他版本支持运行。
腾讯云开发者
