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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
js子页面获取父页面数据示例
May 15 Javascript
JS简单计算器实例
Jan 20 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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中处理模拟rewrite 效果
2006/12/09 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP解析RSS的方法
2015/03/05 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python如何读取文件中图片格式
2020/01/13 Python
python实现井字棋小游戏
2020/03/04 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
毕业生自荐书
2013/12/18 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
秋季运动会开幕词
2015/01/28 职场文书
演讲开场白台词大全
2015/05/29 职场文书
关于车尾的标语大全
2015/08/11 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫