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 ...
随机推荐
- [转]Apache 配置虚拟主机三种方式
转自: http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假设服务器有个IP地址为192.168. ...
- 生成学习算法(Generative Learning algorithms)
一.引言 前面我们谈论到的算法都是在给定\(x\)的情况下直接对\(p(y|x;\theta)\)进行建模.例如,逻辑回归利用\(h_\theta(x)=g(\theta^T x)\)对\(p(y|x ...
- lftp命令
lftp 是一个功能强大的下载工具,它支持访问文件的协议: ftp, ftps, http, https, hftp, fish.(其中ftps和https需要在编译的时候包含openssl库).ll ...
- xml获取配置DataTable
在CSDN写博客时,经常遇到需要绑定数据源的时候,可是自己从数据库获取数据的函数都是已经封装好了的,这样别人复制你的代码,要想看到结果,还得修改修改,很是麻烦,博客实例,数据源简单点就好,这样别人写你 ...
- sharepoint 2010 自定义页面布局
在sharepoint开发中经常遇到 自定义网站栏.内容类型,页面布局和模板页也会遇到,遇到机会就相对比较小. 首先新建一个空的sharepoint项目: 1)创建网站兰: 修改SiteColumns ...
- tensorflow语义分割api使用(deeplab训练cityscapes)
安装教程:https://github.com/tensorflow/models/blob/master/research/deeplab/g3doc/installation.md citysca ...
- Google Guava新手教程
以下资料整理自网络 一.Google Guava入门介绍 引言 Guavaproject包括了若干被Google的 Java项目广泛依赖 的核心库,比如:集合 [collections] . ...
- (转)Unity3D工程版本管理方案
自:http://blog.dou.li/unity3d%E5%B7%A5%E7%A8%8B%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88 ...
- 'Newtonsoft.Json' already has a dependency defined for 'NETStandard.Library'
安装NEST的时候报了如下的错误: PM> Install-Package NEST Attempting to resolve dependency 'Elasticsearch.Net (≥ ...
- [Canvas]New Running Dog
欲看效果请下载后用Chrome浏览器打开index.html观看,下载地址:https://files.cnblogs.com/files/xiandedanteng/51-NewRunningDog ...