时间:2021-05-26
话不多说,请看代码:
//直接保存后缀.htnl用谷歌浏览器打开,亲测有效<head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script> $(function(){ //为Select添加事件,当选择其中一项时触发 $("select:eq(0)").change(function(){ //code }); //获取Select选中的Text:结果是由所有匹配元素包含的文本内容组合起来的文本 var checkText = $("select:eq(0) :selected").text();//建议用这个简单 = $("select:eq(0) option:selected").tetx(); = $("#One").find(":selected").text(); = $("#One").find("option:selected").text(); //如果多选,将返回一个数组,其包含所选的值。 var checkValue = $("#select_id").val(); //获取Select选中匹配元素的当前值,即[即使多选也只]取得第一个匹配元素的val内容 var checkValue = $("select:eq(0) :selected").val();//=========强烈建议用这个,以防多选 //获取Select选中的索引值 var checkIndex = $("#select_id ").get(0).selectedIndex; //获取Select最大的索引值 var maxIndex = $("#select_id :last").prop("index"); //建议用这个 = $("#select_id option:last").prop("index"); = $("select:eq(0)").find(":last").prop("index") = $("select:eq(0)").find("option:last").prop("index") //========================================================================================= //jQuery设置Select选择的 Text和Value: // 设置Select的Value值为4的项选中 $("#select_id ").val(4); //用这个 $("#select_id [value='4']").prop("selected", true); $("#select_id option[value='4']").prop("selected", true); //设置select中的第一个option被选中 $("select :first").prop("selected", true);//这个 $("select :first").prop("selected", 'selected'); $("select option:first").prop("selected", "true"); $("select option:first").prop("selected", "selected"); //============================================================================================ //jQuery添加/删除Select的Option项 $("#select_id").append("<option value='Value'>Text</option>"); //为Select末尾追加一个Option(下拉项) $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select首部插入一个Option(第一个位置) $("#select_id :last").remove(); //删除Select中索引值最大Option(最后一个) $("#select_id :fist").remove(); //删除Select中索引值最小为0Option(第一个) $("#select_id [value='3']").remove(); //删除Select中Value='3'的Option }); </script></head><table> <tr> <td> <!--multiple设定下拉框可以多选,size设定下拉框不呈现下拉方式,--> <select size="12" id="One" multiple="multiple"> <option value='1'>苹果</option> <option value="2">香蕉</option> <option value="3">草莓</option> <option value="4">橘子</option> </select> </td> <td> <input type="button" value=">>>"><br> <input type="button" value=" > "><br> <input type="button" value=" < "><br> <input type="button" value="<<<"><br> </td> <td> <select size="12" id="two" multiple="multiple"> <option value="5">葡萄</option> </select> </td> <td> <input type="button" value=" up "><br><br> <input type="button" value="down"><br> </td> </tr></table>以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文主要介绍select下拉框的相关方法。1、通过id获取下拉框的value和文本值例如:数字1数字2$("#numbersoption:selected").
一、获取下拉列表选中项的值和文本(select)代码select.htm示例如下:复制代码代码如下:获取下拉列表选中项的值和文本(select)//获取下拉列表
利用BootstrapMultiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值首先展示项目案例:多选下拉框功能实现.gi
本节内容:jquery实现select下拉框的取值与赋值,设置选中的方法大全。比如1、设置value为pxx的项选中$(".selector").val("px
jQueryForm表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框、文本框、单选、