1.jQuery获取Select选择的Text和Value

语法解释:

 $("#select_id").change(function(){//code...});             //为Select添加事件,当选择其中一项时触发 var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值var checkValue=$("#select_id").val();                          //获取Select选择的Value var firstText = $('#select_id option:first').val();            //获取第一个 select 的value值var lastText = $('#select_id option:last').val();            //获取最后一个 select 的value值var secondText = $('#select_id option:eq(1)').val();      //获取第二个 select 的value值var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text ,同理,里面的option:selected 可以换做first,last,eq(0),看具体需求了var length = $('#select_idoption').length;                  //获取select 长度

回到顶部

2.jQuery设置Select选择的Text和Value

语法解释:

1. $("#select_id ").get(0).selectedIndex=1;                         //设置Select索引值为1的项选中
2. $("#select_id ").val(4);                                                  //设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 

回到顶部

3.jQuery添加/删除Select的Option项

语法解释:

1. $("#select_id").append("<option value='Value'>Text</option>");    //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>");     //为Select最前插入一个Option(第一个位置)
3. $("#select_id option:last").remove();                                        //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove();                            //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove();                          //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove();                         //删除Select中Text='4'的Option 

回到顶部

4.遍历option和添加、移除option

function changeShipMethod(shipping) {var len = $("select[@name=ISHIPTYPE] option").lengthif (shipping.value != "CA") {$("select[@name=ISHIPTYPE] option").each(function() {if ($(this).val() == 111) {$(this).remove();}});} else {$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));}
}
。 

本文转自Orson博客园博客,原文链接:http://www.cnblogs.com/java-class/p/4590329.html,如需转载请自行联系原作者

web 前端常用组件【02】Select 下拉框相关推荐

  1. 如何实现自定义下拉组件,select下拉框样式自定义,带搜索的select下拉框

    1.实现的效果 2.实现说明 3.完整代码 一.实现的效果: 二.实现说明: 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框: inp ...

  2. c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式

    Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...

  3. 微信小程序 select 下拉框组件

    一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...

  4. 前端下拉框能支持手动输入_可输入的select下拉框

    当select下拉框中没有要选择的信息项时,可以直接在select中输入自己想要得信息项. 在输入信息项时,不改变select下拉框中原有的信息项. 通过Backspace键可以清除刚才输入的信息项, ...

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

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

  6. easyui根据select下拉框内容更新表单内容_Ant Design 4.0 的一些杂事儿 - Select 篇

    前几篇: Ant Design 4.0 的一些杂事儿 - Table 篇 Ant Design 4.0 的一些杂事儿 - Form 篇 聊完了 Table 和 Form 两个重型组件,我们来继续聊聊看 ...

  7. layui下拉框怎么获取自定义值_layui如何得到select下拉框选中的值?

    layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select下拉框选中值的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui如何得到se ...

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

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

  9. [绍棠] iview Select下拉框被overflow遮挡的问题

    问题概述   如果你没有使用插件,没有使用别人给的组件,这个问题一般是不会出现的.但是如果你使用了别人的组件,那么你就会遇到这个问题.我这里说说我遇到的这个问题的地方,总共是2个地方. 是我在使用iv ...

  10. iview select选中值取值_完美解决iview 的select下拉框选项错位的问题

    在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...

最新文章

  1. 先验概率,后验概率,条件概率,贝叶斯
  2. [云炬创业基础笔记]第一章创业环境测试2
  3. cocos2d-x游戏实例(22)-纵版射击游戏(9)
  4. C++函数概念解析(2)
  5. 高频面试题1:自增边量
  6. 灰度共生矩阵(Gray Level Co-occurrence Matrix,GLCM)
  7. java局域网视频传输,java局域网传输
  8. UML图箭头和实线虚线到底什么意思
  9. 现场总线与计算机网络的最大区别,现场总线与局域网的区别是什么
  10. Ubuntu下FLV转为MP4
  11. 联想小新padpro12.6 #Q706F 解锁输入TWRP教程
  12. Spring mvc 的生命周期
  13. VisionMaster 4.0.0 的Modbus通信
  14. ios修改根视图控制器
  15. error hawk@0.10.2: The engine “node“ is incompatible with this module. Expected versi
  16. 计算机中的文件资源组织方式是什么意思,Windows中的库是什么,以及如何使用它们来组织文件 | MOS86...
  17. c语言编码7 3循环码码组,信息论循环码报告
  18. 离线安装snmp安装包修改snmp、syslog配置文件、创建审计员账号shell脚本(适用于centos 7.x 、redhat 7.x系列)
  19. 2022-2028年全球与中国RNA聚合酶抑制剂行业深度分析
  20. Android MVP(四)运用反射配置泛型 Model

热门文章

  1. Android自定义view之measure、layout、draw三大流程
  2. cts测试linux指令skip,linux – dd命令中seek和skip之间有什么区别?
  3. php中glob怎么用,如何在php中利用glob函数对文件进行遍历
  4. mysql sysdate 格式化_MySQL函数汇总
  5. php集合与数组的区别,php数组和链表的区别总结
  6. 苹果手机默认拍照比例_苹果手机拍照有什么技巧?这几个功能要知道,不然别说自己用苹果...
  7. python查找并修改文件中的内容_如何使用Python搜索和替换文件中的文本?
  8. harmonyOS的架构图,HarmonyOS通用设计基础---应用架构
  9. java在linux生成pdf文件,从 Java 应用程序动态生成 PDF 文件
  10. java 倒计时门栓,同步器