简介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项等...相关推荐

  1. bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法

    bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...

  2. layui怎么给下拉框赋值_layui给select下拉框赋值

    转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...

  3. html 下拉框高度,如何自定义设置select下拉框高度的优化方法

    在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法& ...

  4. Jquery select下拉框操作

    select下拉框选中使其内容改变时触发的事件 <select id="plat_form"></select> 在Js中使用 <script> ...

  5. 【jquery】select下拉框赋值

    前言 jquery操作select下拉框 select <select id="type" name="type"><option value ...

  6. php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本

    本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...

  7. selenium webdriver学习(八)------------如何操作select下拉框(转)

    selenium webdriver学习(八)------------如何操作select下拉框 博客分类: Selenium-webdriver 下面我们来看一下selenium webdriver ...

  8. php下拉框选中效果,jquery模拟select下拉框效果

    最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...

  9. JavaScript DOM操作Select下拉框

    DOM操作Select下拉框: 获取select选中的option值,修改选中的选项,添加选项option. <body> <script type="text/javas ...

最新文章

  1. dropdownlist绑定的二种方法
  2. 如何使用jquery_免费CDN:jsDelivr+Github 使用方法
  3. 数学之路(2)-数据分析-R基础(2)
  4. oracle节点1关闭节点2的集群,[Oracle] Oracle两个节点分裂,识别不到对方节点的状态...
  5. SQL2005利用ROW_NUMER实现分页的两种常用方式
  6. POI导出Execl文件,使JAVA虚拟机OOM
  7. C# - winform使用Dictionary的时候,程序一闪而过!
  8. [转]VSTO+WinForm+WebService+WCF+WPF示例
  9. layUI table 内容超出宽度怎么换行显示,而不是显示省略号
  10. PicoDet网络结构在YOLOv5-Lite上的复现
  11. mysql的脏数据_数据库的脏数据问题
  12. mysql 多表联合查询
  13. 华硕a53s拆机图解_华硕a53s_拆机教程_图解_20140228更正
  14. 各类软件激活码(更新中)
  15. WTS考勤系统报表实现原理
  16. 《博客女王干群皇太后名人世界》中国最著名博客女王干群原创作品编号2012100706
  17. 怎么修改我的世界服务器封面,《我的世界:初识服务器》
  18. python yaml PyYaml入门
  19. st_atime、st_mtime和st_ctime
  20. 如何设计全面的客户端功能测试用例

热门文章

  1. 网络编程-Socket介绍
  2. 4.Python标准库_文件管理 (部分os包,shutil包)
  3. 不定高宽的元素居中的方法
  4. C | 看看 C 能做什么
  5. _java5条件阻塞Condition的应用
  6. Android中Handler的使用方法——在子线程中更新界面
  7. 湖南理工学院计算机专业课表,下学期课表“新鲜出炉”,你查了吗?
  8. ppt手动放映怎么设置_一键解决PPT的动画播放和动画排序问题!
  9. HBase之KeyValueScanner
  10. (01)FPGA时序分析概念