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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 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
php抓取https的内容的代码
2010/04/06 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
js实现表格数据搜索
2020/08/09 Javascript
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Django values()和value_list()的使用
2020/03/31 Python
python怎么调用自己的函数
2020/07/01 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
行政文员岗位职责
2013/11/08 职场文书
后勤主管岗位职责
2014/03/01 职场文书
食品安全处置方案
2014/06/14 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2014年标准化工作总结
2014/12/17 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android