jQuery select操作控制方法小结


Posted in Javascript onMay 26, 2010

需要注意的是,这里的代码好多是针对jquery 1.32以前的版本(以后的版本已经不支持@),所以替换为空测试下即可。

jQuery获取Select选择的Text和Value:
语法解释:
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery设置Select选择的Text和Value:
语法解释:
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
2. $("#select_id ").val(4); //设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

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

//遍历option和添加、移除option
function changeShipMethod(shipping){
var len = $("select[@name=ISHIPTYPE] option").length
if(shipping.value != "CA"){
$("select[@name=ISHIPTYPE] option").each(function(){
if($(this).val() == 111){
$(this).remove();
}
});
}else{
$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
}
}

//取得下拉选单的选取值

$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//////////////////////////////////////////////////////////////////
记性不好的可以收藏下:
1,下拉框:

var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

当然jquery的选择器是强大的. 还有很多方法.

<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#selectTest").change(function()
{
//alert("Hello");
//alert($("#selectTest").attr("name"));
//$("a").attr("href","xx.html");
//window.location.href="xx.html";
//alert($("#selectTest").val());
alert($("#selectTest option[@selected]").text());
$("#selectTest").attr("value", "2");

});
});
</script>

<a href="#">aaass</a>

<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

更多可以参考如下文章:
Jquery Select操作方法集合三水点靠木特别版

Javascript 相关文章推荐
谷歌地图打不开的解决办法
Aug 07 Javascript
浅谈javascript的分号的使用
May 12 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
JavaScript数组操作详解
Feb 04 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
select 控制网页内容隐藏于显示的实现代码
May 25 #Javascript
JQuery 动态扩展对象之另类视角
May 25 #Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 #Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 #Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 #Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 #Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
杏林同学录(一)
2006/10/09 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
JQuery入门基础小实例(1)
2015/09/17 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
pygame加载中文名mp3文件出现error
2017/03/31 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
《春晓》教学反思
2014/04/20 职场文书
员工工作及收入证明
2014/10/28 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
营销计划书范文
2015/01/17 职场文书
第一节英语课开场白
2015/06/01 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
详解PyTorch模型保存与加载
2022/04/28 Python