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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
vue二级路由设置方法
Feb 09 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
js+canvas绘制图形验证码
Sep 21 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
vue中使用echarts的示例
2021/01/03 Vue.js
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python实现图片添加文字
2019/11/26 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
《钱学森》听课反思
2014/03/01 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android