jQuery的select相关操作
例:
<select class="selector" id="selector"></select>
1、设置value为pxx的项选中
$("#selector").val("pxx");
2、设置text为pxx的项选中
// 根据text来设置选中
$("#selector").find("option[text='pxx']").attr("selected",true);
// 根据value来设置选中
$("#selector").find("option[value='pxx']").attr("selected",true);
这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
注意IE8中要使用
$(".selector").find("option:selected").val();
$("#selector").val();
4、获取当前选中项的text
注意IE8中要使用
$(".selector").find("option:selected").text();
$("#selector").find("option:selected").text();
这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。
很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jQuery中是非常简单的。
如:
$(".selector1").change(function(){ // 先清空第二个 $(".selector2").empty(); // 实际的应用中,这里的option一般都是用循环生成多个了 var option = $("<option>").val(1).text("pxx"); $(".selector2").append(option); });
jQuery的select相关操作的更多相关文章
- 【jq】JQuery对select的操作
下拉框 <select id="selectID" name="selectName"> <option vlaue="1" ...
- Jquery对select的操作(附日历天数变化代码)
转载请注明出处. 逃不开传统的四种操作:增.删.改.查. <四处搜刮了jquery对select操作的代码,汇集一下,方便以后查看.日历天数变化代码为原创.> [增]: $("# ...
- jQuery关于Select的操作
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...
- input 的radio checkbox 和 select 相关操作
1 select 获取和设置值,以及onchange事件 1下拉框option没有checked事件 可通过select 的 onchange事件进行监控,以获取其值 <select name ...
- jQuery select的操作代码
jQuery對select的操作的实际应用代码. //改變時的事件 复制代码代码如下: $("#testSelect").change(function(){ //事件發生 j ...
- jQuery对Select操作大集合
介绍了jQuery对Select的操作进行了详细的汇总. 1.jQuery添加/删除Select的Option项: 2.$("#select_id").append("& ...
- 前端基础之jquery_mouse相关操作与不同
jquery中mouse相关操作与不同 mousedown() //当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件 mouseup() //当鼠标指针移动到元素上方,并松 ...
- JQuery 对 Select option 的操作---转载
<select id="selectID" > <option value="1">1</option> <optio ...
随机推荐
- Alpha阶段总结
Alpha阶段的验收已经完成,8个小组都展现了他们经过连夜奋战后的成果.相比过往几届,这是第一次8个小组全部顺利演示操作完成,没有个别小组因为任务未完成而延宕演示的情况发生.Alpha演示,各组都实现 ...
- iOS学习-圆形进度条
效果: #import <UIKit/UIKit.h> @interface HsProfitRatePieWidgets : UIView { UILabel *_textLabel; ...
- jQuery form表单序列化为JSON对象!
/* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...
- react 表单
import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...
- javascript创建多行字符串的方法(转)
JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 一.字符 ...
- 数据结构作业——Sanji(优先队列)
山治的婚约 Description 我们知道,山治原来是地下有名的杀人家族文斯莫克家族的三子,目前山治的弟弟已经出现,叫做四治,大哥二哥就叫汪(One)治跟突(Two)治好了(跟本剧情无关) .山治知 ...
- GIT分布式版本控制系统
Git诞生历史 我想大家还记得Linus torvalds在1991年时发布了Linux操作系统吧,从那以后Linux系统变不断发展壮大,因为Linux系统开源的特性,所以一直接受着来自全球Linux ...
- ionic ios iframe 白屏
之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...
- bootstrap在jsp中的应用
http://www.bootcss.com/ 下载bootstrap的js,css文件: 在jsp中的应用: 第一步: 新建一个web项目 将bootstrap下载下来的文件放入WEB-INF下面的 ...
- Table 表单
<style> table th { white-space: nowrap; } .chk { white-space: nowrap; } </style> <tab ...