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.validate 常用方法及需要注意的问题
Mar 20 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
Vue数据监听方法watch的使用
Mar 28 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue实现前端分页完整代码
Jun 17 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基础学习之变量的使用
2011/06/09 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
做web开发 先学JavaScript
2014/12/12 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python中round函数如何使用
2020/06/19 Python
Django视图、传参和forms验证操作
2020/07/15 Python
实习单位接收函
2014/01/11 职场文书
党员干部公开承诺书
2014/03/26 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
神龙架导游词
2015/02/11 职场文书
创先争优个人总结
2015/03/04 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
整理Python中常用的conda命令操作
2021/06/15 Python