浅析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数组处理多个字符串的连接问题
Aug 20 Javascript
js DOM模型操作
Dec 28 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php异常处理使用示例
2014/02/25 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python实现实时视频流播放代码实例
2020/01/11 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
综治维稳工作汇报
2014/10/27 职场文书
大雁塔导游词
2015/02/04 职场文书
社会实践活动总结格式
2015/05/11 职场文书
2015学校年度工作总结
2015/05/11 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python