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 ...
随机推荐
- Android工程的编译过程
现在很多人想对Android工程的编译和打包进行自动化,比如建立每日构建系统.自动生成发布文件等等.这些都需要我们对Android工程的编译和打包有一个深入的理解,至少要知道它的每一步都做了什么,需要 ...
- DrawerLayout 和 NavigationView 的使用
参考: 1.NavigationView 的使用 2.NavigationView更改菜单icon和title颜色变化效果 3.Android 自己实现 NavigationView 转了第一篇 ...
- MYSQL (二)
视图: 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 1. 尽量使用视图完成读操作 2. ...
- dom 节点篇 ---单体模式
<script> var creatTag={ oUl:document.createElement('ul'), oDiv:document.createElement('div'), ...
- Python MongoDB使用介绍
MongoDB介绍 MongoDB是一个面向文档的,开源数据库程序,它平台无关.MongoDB像其他一些NoSQL数据库(但不是全部!)使用JSON结构的文档存储数据.这是使得数据非常灵活,不需要的S ...
- BZOJ4539: [Hnoi2016]树
复制的树缩点,主席树查k小,毫无技术含量,纯码农题. #include<bits/stdc++.h> #define u first #define v second #define F ...
- Hybrid APP混合开发的一些经验和总结
http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...
- 继承 原生js 与 $.extend(true,default,opts||{});
$.extend(true,default,opts||{}); var obj1={ name:'liu', sex:'m', work:'pc' } var obj2={ sex:'w' } va ...
- WinForm------DateEdit属性设置
1.只能选择年份属性设置
- INTRODUCTION TO BIOINFORMATICS
INTRODUCTION TO BIOINFORMATICS 这套教程源自Youtube,算得上比较完整的生物信息学领域的视频教程,授课内容完整清晰,专题化的讲座形式,细节讲解比国内的京师大 ...