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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JS匿名函数实例分析
Nov 26 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 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模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
JS delegate与live浅析
2013/12/21 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
社区文化建设方案
2014/05/02 职场文书
群教班子对照检查材料
2014/08/26 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
python基础之模块的导入
2021/10/24 Python