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 圆角div的实现代码
Oct 15 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
农村婚庆司仪主持词
2014/03/15 职场文书
竞聘演讲稿
2014/04/24 职场文书
协议书范文
2015/01/27 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
详解Python中__new__方法的作用
2022/03/31 Python