jQuery处理下拉框(Select、radio、checkbox等)代码
//遍历option和添加、移除option
|
<script> 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]")); } } </script> |
//取得下拉选单的选取值
$('#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();
//得到下拉菜单的选中项的ID属性值
var cc3 = $('.formc select[@name="country"]').attr("id");
//清空下拉框
$("#select").empty();//$("#select").html('');
//添加下拉框的option
$("<option value='1'>1111</option>").appendTo("#select")
稍微解释一下: 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();//清空下拉框
jQuery处理下拉框(Select、radio、checkbox等)代码的更多相关文章
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
- 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
- JQuery操作下拉框 select
要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...
- jQuery设置下拉框select 默认选中第一个option
$("#id option:first").prop("selected", 'selected');
- jquery模拟下拉框单选框复选Select,Checkbox,Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......
jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...
- JQuery操作下拉框
转载自下面的链接,很有用的. http://www.cnblogs.com/yrhua/archive/2012/11/04/2753571.html 要实现这种效果: HTML代码 <scri ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
随机推荐
- 如何用 Java 实现 Web 应用中的定时任务?
定时任务,是指定一个未来的时间范围执行一定任务的功能.在当前WEB应用中,多数应用都具备任务调度功能,针对不同的语音,不同的操作系统, 都有其自己的语法及解决方案,windows操作系统把它叫做任务计 ...
- [转]php 操作数组 (合并,拆分,追加,查找,删除等)
From : http://justcoding.iteye.com/blog/1181962 1. 合并数组 array_merge()函数将数组合并到一起,返回一个联合的数组.所得到的数组以第一个 ...
- ProDinner
ylbtech-dbs:ProDinner A, 数据库关系图 返回顶部 4, 点餐关系图 3, 留言图 1, 用户角色关系图 0, B,SQL脚本返回顶部 2, use master go --ki ...
- cesium and three.js【转】
https://blog.csdn.net/zhishiqu/article/details/79077883 这是威尔逊Muktar关于整合Three.js与铯的客人帖子.Three.js是一个轻量 ...
- JavaScript-undefined与null区别
JavaScript中的null在其他编程语言中也很常见,但是JavaScript在设计的过程中null自动转换为0,为了更好表示空,这个时候undefined出现了,null通过typeof结果是“ ...
- Twitter雪花算法 SnowFlake算法 的java实现
概述 SnowFlake算法是Twitter设计的一个可以在分布式系统中生成唯一的ID的算法,它可以满足Twitter每秒上万条消息ID分配的请求,这些消息ID是唯一的且有大致的递增顺序. 原理 Sn ...
- SQL SERVER CXPACKET-Parallelism Wait Type 的惯用解决方案
最近我的两个库出现,出现较多的CXPACKET等待,在网上找了一下资料.其中有篇一个SQL Server专栏作家的文章不错,也解决了我的一些疑问,就翻译在这里. 翻译整理仅用于传播资讯之目的. 原文出 ...
- 交互软件Axure—高保真原型
在上一篇文章中跟大家分享了Axure7.0 的简介.基本操作和原型图的制作,主要是应用元件库里的原件进行界面元素的搭建,直至完成原型图,在最后给大家展示了高保真原型图效果.而在本次分享中,主要带领大家 ...
- android 框架层 常用类介绍
名称 功能描述 示意图 activitymanager 管理应用程序的周期并提供常用的回退功能 window manager 窗口管理者 content provider 用于访问另一个的数据,或者共 ...
- Linux系统下对NFS服务安全加固的方法
NFS(Network File System)是 FreeBSD 支持的一种文件系统,它允许网络中的计算机之间通过 TCP/IP 网络共享资源.不正确的配置和使用 NFS,会带来安全问题. 概述 N ...