浅析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 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
JavaScript实现多文件下载方法解析
Aug 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
layui表格实现代码
2017/05/20 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
详解Vue.js中.native修饰符
2018/04/24 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python中的类与类型示例详解
2019/07/10 Python
Python3常见函数range()用法详解
2019/12/30 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python爬虫可以爬什么
2020/06/16 Python
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
企业业务员岗位职责
2014/03/14 职场文书
小学班级口号
2014/06/09 职场文书
英文感谢信范文
2015/01/21 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
听课评课活动心得体会
2016/01/15 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
公证书
2019/04/17 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书