Jquery获得控件值的三种方法总结


Posted in Javascript onFebruary 13, 2014

一 Jquery获得服务器控件值的方法
由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法:

服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>

1. $("#<%=txtUserID.ClientID%>").val();

2. $("input[id*=txtUserID]").val();

3. $("*[id$=txtUserID]").val();

二 Jquery获得控件值的方法

取值:

$("")是一个jquery对象,而不是一个dom element
value是dom element的属性
jquery与之对应的是val
val() :获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
所以,代码应该这样写:
取值:val = $("#id")[0].value;
赋值:
$("#id")[0].value = "new value";
或者$("#id").val("new value");

或者这样也可以:val = $("#id").attr("value");
获取一组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获得控件 DropDownList值的方法

 <script type="text/javascript">
       function bbOK()
       {         
                var a = $("#ddlGuo option:selected").val();
                var b = $("#ddlGuo option:selected").text();
                $("#txttext").attr("value", b);
                $("#txtval").attr("value", a);         
       }   
    </script>
<html>
  <asp:DropDownList ID="ddlGuo" runat="server"  >
            <asp:ListItem Selected="True" Value="001">北京市</asp:ListItem>
            <asp:ListItem Value="301">南京</asp:ListItem>
            <asp:ListItem Value="313">苏州</asp:ListItem>      
        </asp:DropDownList>
        <asp:TextBox ID="txtval" runat="server"></asp:TextBox>
        <asp:TextBox ID="txttext" runat="server"></asp:TextBox>  
<br />         
            <asp:Button ID="Button1" runat="server" Text="点击Select" OnClientClick="bbOK();" />  
 </html>
Javascript 相关文章推荐
jquery插件jquery倒计时插件分享
Dec 27 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
angularJS深拷贝详解
Mar 23 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
vue购物车插件编写代码
Nov 27 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
基于vue-element组件实现音乐播放器功能
May 06 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 #Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 #Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 #Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 #Javascript
用Jquery实现滚动新闻
Feb 12 #Javascript
Jquery实现自定义tooltip示例代码
Feb 12 #Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 #Javascript
You might like
php 静态页面中显示动态内容
2009/08/14 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python hook监听事件详解
2018/10/25 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python修改列表值问题解决方案
2020/03/06 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
广告设计专业自荐信范文
2013/11/14 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2014年班级工作总结
2014/11/14 职场文书
师德先进个人材料
2014/12/20 职场文书
离婚协议书的范本
2015/01/27 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
干部培训简讯
2015/07/20 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书