jQuery对select的基本操作

一、基本操作

为select添加事件,当选择其中一项时触发

$("#select_id").change(function(){ });   

获取select选择的Text

var checkText=$("#select_id").find("option:selected").text();

获取Select选择的Value

var checkValue=$("#select_id").val();

获取select选择的索引值

var checkIndex=$("#select_id ").get(0).selectedIndex;  

获取select最大的索引值

var maxIndex=$("#select_id option:last").attr("index");  

设置Select索引值为1的项选中

$("#select_id ").get(0).selectedIndex=1;

设置Select的Value值为4的项选中

$("#select_id ").val(4);

设置Select的Text值为jQuery的项选中

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

二、添加/删除select元素的Option项

为select追加一个Option(下拉项)

$("#select_id").append("
Text");

为select插入一个Option(第一个位置)

$("#select_id").prepend("
请选择");

删除Select中索引值最大Option(最后一个)

$("#select_id option:last").remove();

删除Select中索引值为0的Option(第一个)

$("#select_id option[index='0']").remove();

删除Select中Value='3'的Option

$("#select_id option[value='3']").remove();

删除Select中Text='4'的Option

$("#select_id option[text='4']").remove();

原帖地址:http://blog.sina.com.cn/s/blog_657332580100znjq.html

时间: 2024-10-31 05:07:32

jQuery对select的基本操作的相关文章

jQuery Html控件基本操作(日常收集整理)_jquery

闲来无聊,收集总结一下jQuery常用操作,希望对新手有用. 基于jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&q

jQuery对select操作小结(遍历option,操作option)

本篇文章是关于jQuery对select的操作进行了总结介绍,需要的朋友可以参考下   //遍历option和添加.移除optionfunction changeShipMethod(shipping){  var len = $("select[@name=ISHIPTYPE] option").length  if(shipping.value != "CA"){   $("select[@name=ISHIPTYPE] option").e

jQuery对Select的操作大集合

 本篇文章主要介绍了jQuery对Select的操作进行了详细的汇总,需要的朋友可以过来参考下,希望对大家有所帮助 1.jQuery添加/删除Select的Option项: 2.$("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)   3.$("#select_id").prepend("

JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值

 本篇文章主要是对JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery获取Select选择的Text和Value:  语法解释:  1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发  2. var checkText=$("#select_id"

jQuery中Dom的基本操作小结

 本篇文章主要是对jQuery中Dom的基本操作进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery中各个节点的基本操作 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

jquery操作select详解

 本篇文章主要是对jquery操作select(取值,设置选中)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了.   比如<select class="selector"></select>   1.设置value为pxx的项选中    $(".selector").val("pxx");   2.设置text为pxx的项选中

JQUERY 设置SELECT选中项代码

 本篇文章主要是对JQUERY 设置SELECT选中项的代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JQUERY可通过value值,设定指定value的option为选中项  代码如下: $("#SelectId").attr("value", "theValueYouWantToSetIndex")   另:jQuery.trim( str )方法,可以去掉字符串前后的空格   

轻松使用jQuery双向select控件Bootstrap Dual Listbox_jquery

本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一.使用 1.引用css和js文件 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> <