jQuery操作下拉框select
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery操作下拉框select,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1651字,纯文字阅读大概需要3分钟。
内容图文
获取select值
- html结构添加select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<select id="selector">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
</select>
</body>
<script>
</script>
</html>
- 获取当前选项中的
text
和value
var text = $("#selector").find("option:selected").text();
var value = $("#selector").find("option:selected").val();
console.log("text:" + text);
console.log("value:" + value);
- 获取当前选项中的索引(从0开始)
var index = $("#selector").get(0).selectedIndex;
- 获取第一项(最小)和最后一项(最大)的
text
var first = $("#selector option:last").text();
var last = $("#selector option:first").text();
console.log("last:" + last);
console.log("first:" + first);
更改设置选中状态
- 改变select的选中,执行该语句后将第1个设置为选中状态,
eq(i)
,i为索引值
$("#selector").each(function () {
$(this).find("option").eq(1).prop("selected", true)
});
- 为select添加事件,当选择其中一项时触发事件
$('#selector').change(function (e) {
alert("事件触发");
});
- 设置select索引值为
2
的项选中
$("#selector").get(0).selectedIndex = 2;
- 设置select的value值为
1
的项选中
$("#selector option[value='1']").prop("selected", true);
添加删除select选项
- 为select添加一个
option
下拉项,在末尾添加
$("#selector").append("<option value='5'>选项五</option>");
- 为select添加一个
option
下拉项,在起始位置添加
$("#selector").prepend("<option value='5'>选项五</option>");
- 删除select最后一个
option
$("#selector option:last").remove();
- 删除select中value=3的
option
$("#selector option[value='3']").remove();
内容总结
以上是互联网集市为您收集整理的jQuery操作下拉框select全部内容,希望文章能够帮你解决jQuery操作下拉框select所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。