浅析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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
浅析php工厂模式
2014/11/25 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Python 开发Activex组件方法
2009/11/08 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
python 统计代码行数简单实例
2017/05/04 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python获取服务器响应cookie的实例
2018/12/28 Python
python 实现二维列表转置
2019/12/02 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
python re的findall和finditer的区别详解
2020/11/15 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
C语言变量的命名规则都有哪些
2013/12/27 面试题
成品仓管员岗位职责
2013/12/11 职场文书
留学推荐信写作指南
2014/01/25 职场文书
股权转让协议书
2014/12/07 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书