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 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
gulp构建小程序的方法步骤
May 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP session 会话处理函数
2016/06/06 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python and or用法详解
2019/06/26 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
护士自荐信怎么写
2013/10/18 职场文书
拓展培训心得体会
2014/01/04 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
2014年公务员工作总结
2014/11/18 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Python中使用ipython的详细教程
2021/06/22 Python