jquery获得option的值和对option的操作。

jQuery获取Select元素,并选择的Text和Value:

复制代码代码如下:
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 
var checkValue=$("#select_id").val(); //获取Select选择的Value 
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 

jQuery获取Select元素,并设置的 Text和Value:

实例分析:

复制代码代码如下:
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 
$("#select_id ").val(4); // 设置Select的Value值为4的项选中 
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 

jQuery添加/删除Select元素的Option项:

实例分析:

复制代码代码如下:
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

三级分类 <select name="thirdLevel" id="thirdLevel" 
onchange="getFourthLevel()"> 
<option value="0" id="thirdOption"> 
请选择三级分类 
</option> 
</select> 
</div>

四级分类: 
<select name="fourthLevelId" id="fourthLevelId"> 
<option value="0" id="fourthOption"> 
请选择四级分类 
</option> 
</select> 
</div> 
if($("#thirdLevel").val()!=0){ 
$("#thirdLevel option[value!=0]").remove(); 

if($("#fourthLevelId").val()!=0){ 
$("#fourthLevelId option[value!=0]").remove(); 
}//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到! 

获取Select : 
获取select 选中的 text : 
$("#ddlRegType").find("option:selected").text(); 
获取select选中的 value:

$("#ddlRegType ").val();

获取select选中的索引: 
$("#ddlRegType ").get(0).selectedIndex; 
设置select: 
设置select 选中的索引: 
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value:

复制代码代码如下:
$("#ddlRegType ").attr("value","Normal“); 
$("#ddlRegType ").val("Normal"); 
$("#ddlRegType ").get(0).value = value; 

设置select 选中的text:

复制代码代码如下:
var count=$("#ddlRegType option").length; 
for(var i=0;i<count;i++) 
{ if($("#ddlRegType ").get(0).options[i].text == text) 
{ // www.jbxue.com
$("#ddlRegType ").get(0).options[i].selected = true; 
break; 

}

$("#select_id option[text='jQuery']").attr("selected", true);

设置select option项:

复制代码代码如下:
$("#select_id").append("<option value='Value'>Text</option>"); //添加一项option 
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option 
$("#select_id option:last").remove(); //删除索引值最大的Option 
$("#select_id option[index='0']").remove();//删除索引值为0的Option 
$("#select_id option[value='3']").remove(); //删除值为3的Option 
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option 

清空 Select:

$("#ddlRegType ").empty();

jquery获得值:

val() 
text()

设置值 
val('在这里设置值')

复制代码代码如下:
$("document").ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');//全选 
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//取消全选 
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){//反选 
if($(this).attr("checked")){ 
$(this).removeAttr("checked"); 

else{ 
$(this).attr("checked",'true'); 

}) 
}) 
$("#btn5").click(function(){//输出选中的值 
var str=""; 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+"\r\n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
}) 

jquery获得option的值(示例)的更多相关文章

  1. jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13 我要评论

    jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...

  2. JavaScript or jQuery 获取option value值 以及文本内容的方法

    1.html <div class="form-group"> <label>保险公司</label> <select class=&qu ...

  3. jquery获得option的值和对option进行操作

    Query获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加 ...

  4. Jquery操作select,左右移动,双击移动 取到所有option的值

    $(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected& ...

  5. jquery动态刷新select的值,后台传过来List<T>,前台解析后填充到select的option中

    jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...

  6. jQuery取得select 选中值和文本 来自园友“大气象”

    本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...

  7. [转载]jquery获取元素索引值index()方法:

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  8. jquery获取元素索引值index()方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  9. Jquery获得控件值的方法

    一 Jquery获得服务器控件值的方法 由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<a ...

随机推荐

  1. Java对象的序列化和反序列化[转]

    Java基础学习总结--Java对象的序列化和反序列化 一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化.把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用 ...

  2. Python Thread

    lock 对象: acquire():负责取得一个锁.如果没有线程正持有锁,acquire方法会立刻得到锁.否则,它闲意态等锁被释放. 一旦acquire()返回,调用它的线程就持有锁. releas ...

  3. MAC下查看端口占用并杀死进程

    Eclipse在Run on Server时,Tomcat是开启的,但是报错,显示8080.8005和8009端口被占用 终端输入 查看所有开启的端口 sudo lsof -i -P | grep - ...

  4. javaweb学习总结二十三(servlet开发之线程安全问题)

    一:servlet线程安全问题发生的条件 如果多个客户端访问同一个servlet时,发生线程安全问题,那么它们访问的是相同的资源.如果访问 的不是相同资源,则不存在线程安全问题. 实例1:不会产生线程 ...

  5. 自定义HBase的协处理器(Observer)

    自定义一个Observer... 总共分五步: 1°.继承BaseMasterObserver  (写代码  具体看博客....) 案例(当在HBase中创建表的时候在日志中有相关输出): impor ...

  6. 高效的网络流dinic算法模版

    #include <cstring> #include <algorithm> #include <vector> #define Maxn 120010 #def ...

  7. 【原】web服务器占有量统计等 web网站

    根据W3Techs的统计,目前世界排名(根据Alexa)前100万的网站中 1. https://w3techs.com/ nginx 中文站 2. http://www.nginx.cn/doc/

  8. 转: 基于nginx的hls直播系统

    转自:http://blog.csdn.net/cjsafty/article/details/9108587 看点: 1. 详细解解答了 nginx rtmp配置过程. 前写了一篇基于nginx的h ...

  9. Java对Excel表格的操作

    import java.io.File;//引入类import java.io.IOException;import java.util.Scanner;import jxl.Cell;import ...

  10. Android adb常见问题整理(转)

    原文地址:http://blog.csdn.net/androiddevelop/article/details/8130416 以下都是ADB连接问题,可以通过尝试如下步骤,由简单度排序 1. 插拔 ...