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事件模型代码
Jul 01 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 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中mysql与mysqli的区别分析
2013/06/10 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php除数取整示例
2014/04/24 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python学习入门之区块链详解
2017/07/25 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python logging 日志的级别调整方式
2020/02/21 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
python递归函数用法详解
2020/10/26 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
单位介绍信范文
2014/01/18 职场文书
团队激励口号
2014/06/06 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
基层党支部承诺书
2015/04/30 职场文书
道歉的话语大全
2015/05/12 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技