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


Posted in Javascript onJuly 04, 2013

//遍历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();//清空下拉框

Javascript 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 #Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 #Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 #Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 #Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 #Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 #Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 #Javascript
You might like
一些星际专用术语解释
2020/03/04 星际争霸
PHP页面间传递参数实例代码
2008/06/05 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python实现对变位词的判断方法
2020/04/05 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
教师推荐信范文
2013/11/24 职场文书
社团成立邀请函
2014/01/08 职场文书
学生会部长竞聘书
2014/03/31 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书