jquery操作下拉列表、文本框、复选框、单选框集合(收藏)


Posted in Javascript onJanuary 08, 2014

各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法。
遍历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 有用的脚本函数
May 07 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
Angular简单验证功能示例
Dec 22 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
js获取当前页面路径示例讲解
Jan 08 #Javascript
js获取当前路径的简单示例代码
Jan 08 #Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 #Javascript
jquery 图片缩放拖动的简单实例
Jan 08 #Javascript
document.execCommand()的用法小结
Jan 08 #Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 #Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 #Javascript
You might like
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
机电一体化毕业生求职信
2013/11/02 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
商场周年庆活动方案
2014/08/19 职场文书
初中学校对照检查材料
2014/08/19 职场文书
财务总监岗位职责
2015/02/03 职场文书
节约用电倡议书
2015/04/28 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
学习心理学心得体会
2016/01/22 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python