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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
js实现表格筛选功能
Jan 18 Javascript
vue如何限制只能输入正负数及小数
Jul 04 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
网络资源
2006/10/09 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
实现PHP搜索加分页
2016/10/12 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
js完美的div拖拽实例代码
2014/01/22 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
图解javascript作用域链
2019/05/27 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
开放系统互连参考模型
2016/06/29 面试题
servlet面试题
2012/08/20 面试题
授权委托书怎么写
2014/09/25 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android