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 相关文章推荐
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
在Express中提供静态文件的实现方法
Oct 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 str_pad 函数使用详解
2009/01/13 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Django中login_required装饰器的深入介绍
2017/11/24 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
详解Python3 基本数据类型
2019/04/19 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
模范家庭事迹材料
2014/02/10 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
小学生春游活动方案
2014/08/20 职场文书
六年级小学生评语
2014/12/26 职场文书
2015年暑假工作总结
2015/07/13 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers
js作用域及作用域链工作引擎
2022/07/07 Javascript
vue递归实现树形组件
2022/07/15 Vue.js