jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动、取值、根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等。
这一章,站长总结一下jquery里对下拉框select的各种操作,如两个或三个select下拉框的联动效果,读取select下拉框里选中项的值和文本,根据指定的值或文本来选中select下拉框的指定项等操作,先来看具体的在线实例演示:
jquery操作下拉框select的各种方法在线实例演示
下面是上面在线实例的截图:
[jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等_1]
1.先说select下拉框联动效果的实现,大家可以点下面的链接查看,里面有很完整的代码及讲解:
jquery三级联动select下拉菜单特效的实现方法和在线实例展示
2.根据指定的文本来选中select下拉框指定的optilon选项,在网上搜索,基本上说的都是用下面的方法:
$(".selector").find("option[text='angeleb']").attr("selected",true);
但是站长要说,上面的方法是不正确的,至少站长在测试的时候,根本就不起作用,站长用的jquery库的版本是1.7的,测试了好几次都不成功,站长用的方法是下面这样的:
<script language="javascript">
var VZhi=$("#TZhi").val();
$("#S1 option").each(function(i,n){
if($(n).text()==VZhi){
$(n).attr("selected",true);
}
});
</script>
3.根据指定的值来选中select下拉框中指定的option选项:
<script language="javascript">
var VZhi=$("#VZhi").val();
$("#S1 option[value='"+VZhi+"']").attr("selected","selected");
</script>
4.获取select下拉框选中项的option的值:
var S3=$("#S3 option:selected").val();
5.获取select下拉框选中项的option的text文本:
var S2=$("#S2 option:selected").text()
6.动态增加或删除option选项:
//为Select的末尾追加一个Option下拉项
$("#select").append("<option value='Value'>Text</option>");
//在Select的开头追加一个Option下拉项
$("#select").prepend("<option value='0'>请选择</option>");
//删除Select中索引值最大(最后一个)Option
$("#select option:last").remove();
//删除Select中索引值为0(第一个)的Option
$("#select option[index='0']").remove();
//删除Select中Value='3'的Optiona
$("#select option[value='3']").remove();
转载于:https://www.cnblogs.com/cuihongyu3503319/p/10729216.html
jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等...相关推荐
- bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...
- layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
- html 下拉框高度,如何自定义设置select下拉框高度的优化方法
在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法& ...
- Jquery select下拉框操作
select下拉框选中使其内容改变时触发的事件 <select id="plat_form"></select> 在Js中使用 <script> ...
- 【jquery】select下拉框赋值
前言 jquery操作select下拉框 select <select id="type" name="type"><option value ...
- php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
- selenium webdriver学习(八)------------如何操作select下拉框(转)
selenium webdriver学习(八)------------如何操作select下拉框 博客分类: Selenium-webdriver 下面我们来看一下selenium webdriver ...
- php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...
- JavaScript DOM操作Select下拉框
DOM操作Select下拉框: 获取select选中的option值,修改选中的选项,添加选项option. <body> <script type="text/javas ...
最新文章
- dropdownlist绑定的二种方法
- 如何使用jquery_免费CDN:jsDelivr+Github 使用方法
- 数学之路(2)-数据分析-R基础(2)
- oracle节点1关闭节点2的集群,[Oracle] Oracle两个节点分裂,识别不到对方节点的状态...
- SQL2005利用ROW_NUMER实现分页的两种常用方式
- POI导出Execl文件,使JAVA虚拟机OOM
- C# - winform使用Dictionary的时候,程序一闪而过!
- [转]VSTO+WinForm+WebService+WCF+WPF示例
- layUI table 内容超出宽度怎么换行显示,而不是显示省略号
- PicoDet网络结构在YOLOv5-Lite上的复现
- mysql的脏数据_数据库的脏数据问题
- mysql 多表联合查询
- 华硕a53s拆机图解_华硕a53s_拆机教程_图解_20140228更正
- 各类软件激活码(更新中)
- WTS考勤系统报表实现原理
- 《博客女王干群皇太后名人世界》中国最著名博客女王干群原创作品编号2012100706
- 怎么修改我的世界服务器封面,《我的世界:初识服务器》
- python yaml PyYaml入门
- st_atime、st_mtime和st_ctime
- 如何设计全面的客户端功能测试用例
热门文章
- 网络编程-Socket介绍
- 4.Python标准库_文件管理 (部分os包,shutil包)
- 不定高宽的元素居中的方法
- C | 看看 C 能做什么
- _java5条件阻塞Condition的应用
- Android中Handler的使用方法——在子线程中更新界面
- 湖南理工学院计算机专业课表,下学期课表“新鲜出炉”,你查了吗?
- ppt手动放映怎么设置_一键解决PPT的动画播放和动画排序问题!
- HBase之KeyValueScanner
- (01)FPGA时序分析概念