浅析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 相关文章推荐
批量实现面向对象的实例代码
Jul 01 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
js a标签点击事件
Mar 30 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
关于ES6尾调用优化的使用
Sep 11 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实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python 通过文件夹导入包的操作
2020/06/01 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
工作态度检讨书范文
2015/05/06 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers