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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
用javascript做拖动布局的思路
May 31 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
初识Node.js
Mar 20 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
详解vue高级特性
Jun 09 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
PHP4在Windows2000下的安装
2006/10/09 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
BootStrap中
2016/12/10 Javascript
js随机生成一个验证码
2017/06/01 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
大数据分析用java还是Python
2020/07/06 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Python wordcloud库安装方法总结
2020/12/31 Python
教师年度考核自我鉴定
2014/01/19 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
图书借阅制度范本
2015/08/06 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android