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语言结构小记(一)
Sep 10 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
js实现动态显示时间效果
Mar 06 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
python 中split 和 strip的实例详解
2017/07/12 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
TCP/IP的分层模型
2013/10/27 面试题
创业计划书怎样才能打动风投
2014/01/01 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
语文教育专业求职信
2014/06/28 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书