web 前端常用组件【02】Select 下拉框
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]"));} }
web 前端常用组件【02】Select 下拉框相关推荐
- 如何实现自定义下拉组件,select下拉框样式自定义,带搜索的select下拉框
1.实现的效果 2.实现说明 3.完整代码 一.实现的效果: 二.实现说明: 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框: inp ...
- c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
- 微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
- 前端下拉框能支持手动输入_可输入的select下拉框
当select下拉框中没有要选择的信息项时,可以直接在select中输入自己想要得信息项. 在输入信息项时,不改变select下拉框中原有的信息项. 通过Backspace键可以清除刚才输入的信息项, ...
- html 下拉框高度,如何自定义设置select下拉框高度的优化方法
在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法& ...
- easyui根据select下拉框内容更新表单内容_Ant Design 4.0 的一些杂事儿 - Select 篇
前几篇: Ant Design 4.0 的一些杂事儿 - Table 篇 Ant Design 4.0 的一些杂事儿 - Form 篇 聊完了 Table 和 Form 两个重型组件,我们来继续聊聊看 ...
- layui下拉框怎么获取自定义值_layui如何得到select下拉框选中的值?
layui如何得到select下拉框选中的值?下面本篇文章介绍一下layui取得select下拉框选中值的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui如何得到se ...
- layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
- [绍棠] iview Select下拉框被overflow遮挡的问题
问题概述 如果你没有使用插件,没有使用别人给的组件,这个问题一般是不会出现的.但是如果你使用了别人的组件,那么你就会遇到这个问题.我这里说说我遇到的这个问题的地方,总共是2个地方. 是我在使用iv ...
- iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...
最新文章
- 先验概率,后验概率,条件概率,贝叶斯
- [云炬创业基础笔记]第一章创业环境测试2
- cocos2d-x游戏实例(22)-纵版射击游戏(9)
- C++函数概念解析(2)
- 高频面试题1:自增边量
- 灰度共生矩阵(Gray Level Co-occurrence Matrix,GLCM)
- java局域网视频传输,java局域网传输
- UML图箭头和实线虚线到底什么意思
- 现场总线与计算机网络的最大区别,现场总线与局域网的区别是什么
- Ubuntu下FLV转为MP4
- 联想小新padpro12.6 #Q706F 解锁输入TWRP教程
- Spring mvc 的生命周期
- VisionMaster 4.0.0 的Modbus通信
- ios修改根视图控制器
- error hawk@0.10.2: The engine “node“ is incompatible with this module. Expected versi
- 计算机中的文件资源组织方式是什么意思,Windows中的库是什么,以及如何使用它们来组织文件 | MOS86...
- c语言编码7 3循环码码组,信息论循环码报告
- 离线安装snmp安装包修改snmp、syslog配置文件、创建审计员账号shell脚本(适用于centos 7.x 、redhat 7.x系列)
- 2022-2028年全球与中国RNA聚合酶抑制剂行业深度分析
- Android MVP(四)运用反射配置泛型 Model
热门文章
- Android自定义view之measure、layout、draw三大流程
- cts测试linux指令skip,linux – dd命令中seek和skip之间有什么区别?
- php中glob怎么用,如何在php中利用glob函数对文件进行遍历
- mysql sysdate 格式化_MySQL函数汇总
- php集合与数组的区别,php数组和链表的区别总结
- 苹果手机默认拍照比例_苹果手机拍照有什么技巧?这几个功能要知道,不然别说自己用苹果...
- python查找并修改文件中的内容_如何使用Python搜索和替换文件中的文本?
- harmonyOS的架构图,HarmonyOS通用设计基础---应用架构
- java在linux生成pdf文件,从 Java 应用程序动态生成 PDF 文件
- java 倒计时门栓,同步器