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 相关文章推荐
javascript之AJAX框架使用说明
Apr 24 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
JS常用表单验证方法总结
May 22 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 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编程效率的方法
2013/11/07 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
nginx 设置多个站跨域
2021/03/09 Servers
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
python写一个随机点名软件的实例
2019/11/28 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
python中怎么表示空值
2020/06/19 Python
如何利用python进行时间序列分析
2020/08/04 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
电子商务专业自荐信
2014/06/02 职场文书
体育馆的标语
2014/06/24 职场文书
2014年妇女工作总结
2014/12/06 职场文书
运动会广播稿20字
2015/08/19 职场文书
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python