前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >新手编程1001问(1)

新手编程1001问(1)

作者头像
高一峰
发布2020-09-22 10:27:51
1.5K0
发布2020-09-22 10:27:51
举报
文章被收录于专栏:高渡号外
‍新手编程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版本,读者可在网上下载其他版本支持运行。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 高渡号外 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ‍Q:JavaScript或JQuery如何获取选中的文本和值?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档