web 前端常用组件【02】Select 下拉框
2023-09-27 14:22:34 时间
<select id="hello"></select>
关于 select 支持的属性和响应事件,可以参照:http://www.runoob.com/jsref/dom-obj-select.html
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").length if (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]")); } }
相关文章
- 25 创建局部组件、组测局部组件、组件命名法
- 【Vue】路由组件传参(Query和Params)及路由命名name的用途(图文+代码)
- 【Vue】Vue组件中事件和方法的混合(mixin)应用(图文+代码示例)
- 微信小程序 - 实现文本展开与收起功能组件(初始时隐藏文字内容,当点击查看更多时展开)点击隐藏和点击显示 / 折叠与展开 / 大段文本内容过多,实现折叠与展开效果 ,超详细代码注释文章教程源码插件
- 微信小程序 - wx.navigateTo 跳转的路径携带 query 等参数,直接被忽略截断了(只剩网页域名后面的参数都没了),导致无法顺利传递给 web-view 组件(解决方案)
- VMware vSphere组件和功能概述
- 【前端】vue组件之间数据传递/父子组件/父传子/子传父/兄弟组件
- 【快应用】H5快应用Web组件打开的网页出现跨域问题如何解决?
- 【Java UI】HarmonyOS 如何集成SlidingDrawer组件
- 《Android开发基础教程》——6.2节Gallery界面组件——画廊展示
- SwiftUI iOS 颜色组件之 Material Design Color (教程含源码)
- SwiftUI iOS 开源组件之FlashCard旋转卡片slider(教程含源码)
- SwiftUI高手之路 View组件复用List分页Generics
- Vue知识点总结(12)——组件通信-子传父(超级详细)
- 在WEB项目中调用QQ通讯组件打开QQ聊天界面
- 隆基股份新增光伏组件产能 谋海外多建厂突破欧美“双反”
- 浅析如何使用前端终端组件Xterm.js制作一个web terminal及遇到的元素自适应、字符删除与上下键切换命令等问题
- Unity 之 UGUI Input Field输入组件详解
- 一文读懂tomcat组件--一个web服务器的架构演化史
- K8S组件-----图形化web界面Dashboard搭建安装,让k8s管理更简单