例:

<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相关操作的更多相关文章

  1. 【jq】JQuery对select的操作

    下拉框 <select id="selectID" name="selectName"> <option vlaue="1" ...

  2. Jquery对select的操作(附日历天数变化代码)

    转载请注明出处. 逃不开传统的四种操作:增.删.改.查. <四处搜刮了jquery对select操作的代码,汇集一下,方便以后查看.日历天数变化代码为原创.> [增]: $("# ...

  3. jQuery关于Select的操作

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  4. jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

  5. input 的radio checkbox 和 select 相关操作

    1  select 获取和设置值,以及onchange事件 1下拉框option没有checked事件 可通过select 的 onchange事件进行监控,以获取其值 <select name ...

  6. jQuery select的操作代码

    jQuery對select的操作的实际应用代码. //改變時的事件  复制代码代码如下: $("#testSelect").change(function(){ //事件發生  j ...

  7. jQuery对Select操作大集合

    介绍了jQuery对Select的操作进行了详细的汇总. 1.jQuery添加/删除Select的Option项: 2.$("#select_id").append("& ...

  8. 前端基础之jquery_mouse相关操作与不同

    jquery中mouse相关操作与不同 mousedown() //当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件 mouseup() //当鼠标指针移动到元素上方,并松 ...

  9. JQuery 对 Select option 的操作---转载

    <select id="selectID" > <option value="1">1</option> <optio ...

随机推荐

  1. Alpha阶段总结

    Alpha阶段的验收已经完成,8个小组都展现了他们经过连夜奋战后的成果.相比过往几届,这是第一次8个小组全部顺利演示操作完成,没有个别小组因为任务未完成而延宕演示的情况发生.Alpha演示,各组都实现 ...

  2. iOS学习-圆形进度条

    效果: #import <UIKit/UIKit.h> @interface HsProfitRatePieWidgets : UIView { UILabel *_textLabel; ...

  3. jQuery form表单序列化为JSON对象!

    /* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...

  4. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  5. javascript创建多行字符串的方法(转)

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 一.字符 ...

  6. 数据结构作业——Sanji(优先队列)

    山治的婚约 Description 我们知道,山治原来是地下有名的杀人家族文斯莫克家族的三子,目前山治的弟弟已经出现,叫做四治,大哥二哥就叫汪(One)治跟突(Two)治好了(跟本剧情无关) .山治知 ...

  7. GIT分布式版本控制系统

    Git诞生历史 我想大家还记得Linus torvalds在1991年时发布了Linux操作系统吧,从那以后Linux系统变不断发展壮大,因为Linux系统开源的特性,所以一直接受着来自全球Linux ...

  8. ionic ios iframe 白屏

    之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...

  9. bootstrap在jsp中的应用

    http://www.bootcss.com/ 下载bootstrap的js,css文件: 在jsp中的应用: 第一步: 新建一个web项目 将bootstrap下载下来的文件放入WEB-INF下面的 ...

  10. Table 表单

    <style> table th { white-space: nowrap; } .chk { white-space: nowrap; } </style> <tab ...