浅析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 三种编解码方式
Feb 01 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
js加解密 脚本解密
2008/02/22 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
创业计划书怎样才能打动风投
2014/01/01 职场文书
国庆宣传标语
2014/06/30 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
基层党支部整改方案
2014/10/25 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python