`
chenhongquan
  • 浏览: 44950 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

转 JQ

阅读更多
原文地址:http://blog.chinaunix.net/u3/111819/showart_2197944.html

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
 
 

http://www.cnblogs.com/SAL2928/archive/2008/10/28/1321285.html

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的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

----------------------------------------------------------------------------------------------------

 

//遍历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'& gt;1111</option><optionvalue='2'>2222</option& gt;").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();// 清空下拉框

分享到:
评论
1 楼 逐客叫我 2011-09-27  
不错 我喜欢

相关推荐

    赞助商商标翻转JQ插件

    【赞助商商标翻转JQ插件】是一个基于jQuery(简称为JQ)的轻量级插件,用于实现品牌形象或商标的动态翻转效果,为网页增添互动性和视觉吸引力。这种翻转效果通常用于展示产品或服务的两面,如前后对比、新旧版本切换...

    图标翻转JQ

    图标翻转JQ,顾名思义,是利用jQuery库实现的一种动态效果,它使得网页上的图标能够在用户交互时产生翻转的视觉效果。在网页设计中,这种效果常用于按钮、指示器或者卡片等元素,以增加用户体验的互动性和趣味性。...

    jq 网页转pdf格式

    `jq` 是一个轻量级的JavaScript库,它不直接支持将网页转换为PDF,但我们可以结合其他工具和方法来实现这个功能。本文将详细介绍如何使用`jq`与其他相关技术来完成网页到PDF的转换。 首先,`jq`库主要用于处理JSON...

    jq汉字转拼音

    《jq汉字转拼音插件详解及应用》 在网页开发中,有时候我们需要将汉字转换为拼音,例如在制作搜索引擎、地址导航或者用户输入提示等场景。"jq汉字转拼音"插件为此提供了一种便捷的解决方案,它基于jQuery库,能够...

    jq垂直水平翻转效果

    本示例中的“jq垂直水平翻转效果”是指利用jQuery和相关的插件来实现一种动态视觉效果:当鼠标悬停在图片上时,图片会进行水平或垂直的翻转,这种效果常用于增强用户体验,尤其是在网页设计中。 首先,要实现这个...

    JQ转盘插件

    转盘插件在网页设计中常用于实现互动式的抽奖或者游戏功能,而“JQ转盘插件”正是这样一种基于jQuery库的解决方案。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务...

    JQ JS javascript 普通图片上传 图片格式转换 图片base64转换 jpg转base64 png转base64

    本文将深入探讨如何使用jQuery(JQ)、JavaScript(JS)以及base64编码技术来实现普通图片的上传、格式转换以及base64编码转换。我们将讨论jpg和png图片如何转化为base64字符串,以便在网络上传输或存储。 首先,让...

    jquery实现360度立方体3D旋转效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个引人注目的360度立方体3D旋转效果。这个效果通常被应用于产品展示、交互式界面设计和网页动态元素中,能够为用户带来丰富的视觉体验。 首先,让我们理解基本概念...

    jq-旋转按钮

    【jq-旋转按钮】是一个基于JavaScript库jQuery实现的交互式网页设计元素,它通常用于创建具有动态视觉效果的按钮,例如加载指示器或动画切换功能。在这个项目中,`index.html`文件是整个演示的核心,它包含了HTML...

    jq安装包rpm.rar

    `jq`是一款强大的命令行JSON处理器,用于在命令行界面中查看、操作和转换JSON数据。这个`jq安装包rpm.rar`是一个包含了`jq`工具的RPM(Red Hat Package Manager)格式的压缩包,主要面向使用Linux发行版如CentOS、...

    HTML+JQ抽奖转盘源码

    HTML+JQ抽奖转盘源码是一种常见的网页互动元素,常用于在线活动、游戏或促销活动中,以增加用户的参与度和趣味性。这个源码基于HTML(超文本标记语言)和JQuery(一种轻量级的JavaScript库)来实现,具有可配置的...

    JQ8900语音模块资料包

    "5-语音合成软件-文字转语音"文件可能包含一个简单的文字转语音的软件,JQ8900模块支持将文本数据转换为语音输出,这对于语音提示、人机交互等应用场景非常有用。 6. **音频测试与音量调节** "6-测试音频"可能是...

    jQ立体旋转幻灯片.zip

    总结来说,"jQ立体旋转幻灯片"是一款利用jQuery和CSS3技术实现的创新性图片展示插件,它以其立体旋转的特效,为网页设计带来了新的可能性。通过深入研究和实践,开发者不仅可以掌握这一特效的实现,还可以在此基础上...

    JQ实现360度旋转

    本文将详细介绍如何使用jQuery(简称JQ)来实现360度旋转的效果,以及相关JavaScript(JS)知识。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。由于...

    基于jq-viewer的pc和移动端的图片缩放,托动、旋转等

    【基于jq-viewer的PC和移动端图片操作详解】 在网页开发中,图片的展示和交互是不可或缺的一部分。jq-viewer是基于jQuery库封装的一个高效、轻量级的图片查看器插件,它提供了丰富的功能,如图片的缩放、拖动、旋转...

    jq-1.5.tar

    《jq-1.5:Linux下强大的JSON数据解析利器》 在信息技术日新月异的今天,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,已经广泛应用于各种网络服务和应用程序之间。而在Linux环境中,jq-1.5则...

    jQuery图片3D旋转轮播插件imageflow

    jQuery图片3D旋转轮播插件ImageFlow是前端开发中用于创建引人注目、交互性强的图片展示效果的一种工具。这款插件以其独特的3D旋转特性,为网站的图片展示带来全新的视觉体验,尤其适合产品展示、画廊或者摄影网站等...

    图片查看 -jq插件

    本文将深入探讨“图片查看 - jq插件”这一主题,重点关注如何使用jQuery来实现图片的单图查看、多图查看、旋转和放大缩小功能。 首先,我们来看“jQueryViewer”这个文件名,这很可能是一个基于jQuery的图片查看器...

    JQ实现图片旋转

    在本文中,我们将深入探讨如何使用JavaScript(JS)和jQuery(JQ)库来实现图片旋转,以及一种独特的“球形旋转”效果和字母更换的技巧。这些技术在网页动态展示、用户交互以及创意设计中都非常有用。 首先,我们要...

Global site tag (gtag.js) - Google Analytics