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的实现简单的分页控件
Oct 10 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
vuex的使用步骤
Jan 06 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
巧用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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
如何在PHP中使用数组
2020/06/09 PHP
JS实现时间格式化的方式汇总
2013/10/16 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Python实现视频下载功能
2017/03/14 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
什么是方法的重载
2013/06/24 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
关于毕业的广播稿
2014/01/10 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android