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获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
JS中判断null的方法分析
Nov 21 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
Vue页面跳转传递参数及接收方式
Sep 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
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
php提取微信账单的有效信息
2018/10/01 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python 含参构造函数实例详解
2017/05/25 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python中Unittest框架的具体使用
2019/08/27 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
python3中数组逆序输出方法
2020/12/01 Python
UNIX特点都有哪些
2016/04/05 面试题
活动邀请函范文
2014/01/19 职场文书
函授本科自我鉴定
2014/02/04 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
九一八事变演讲稿
2014/09/05 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
黄埔军校观后感
2015/06/10 职场文书
画展观后感
2015/06/17 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书