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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
微信小程序服务器日期格式化问题
Jan 07 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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脚本的10个技巧(2)
2006/10/09 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
layui表格实现代码
2017/05/20 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python操作xml文件详细介绍
2014/06/09 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
大学军训自我鉴定
2013/12/15 职场文书
求职信范文英文版
2014/01/05 职场文书
创业大赛策划书
2014/03/01 职场文书
毕业生工作求职信
2014/06/30 职场文书
小学感恩主题班会
2015/08/12 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏