js前端取服务器控件的值

[javascript]  view plain  copy

1. <span style="font-size:18px;">在web开发过程中，对于服务器控件，或者设置runat="server"的html控件，在应用母版页后，程序编译后服务控件的ID会发生改变，有时候根据控件id来获取时，会取不到对应控件（当然这种情况也不是经常会有），那么我们如何来解决这个问题呢。</span>  

1.js前端取服务器控件的值

有三种解决方法，大家可以尝试一下

[html]  view plain  copy

1. 页面示例：  

[html]  view plain  copy

1. <pre name="code" class="html"><div>  

[html]  view plain  copy

1.      <aspTextBox ID="txtServer"  runat="server">server</asp:TextBox>  
2.      <input id="txtInput" type="text" runat="server" value="input" />  
3. </div>  

如上我们定义两个带服务器标识的控件，现在我们用js来取txtServer的值，txtInput与此一样，示例代码如下：

[javascript]  view plain  copy

1. function A() {  
2.        //方案1：用ClientId来标识  
3.        var r_type = document.getElementById("<%=txtServer.ClientID %>").value;  
4.        //方案2：用JQuery来取值  
5.        var str = $("input[id$='txtServer']").val();  
6.        //直接用ID  
7.        var st2 = $("#txtServer").val();  
8.        alert(str);  
9.        alert(r_type);  
10.        alert(st2);  
11.    }  

2.JQuery移除指定元素

在元素动态绑定数据时，每次绑定数据时，需要先移除之前已加载的数据，如填充<ul>中的<li>

[html]  view plain  copy

1. <ul class="area" id="ulregion">   
2. lt;/ul>  

JS示例

[javascript]  view plain  copy

1. var $sel = $('#<span style="font-family: Arial, Helvetica, sans-serif;">ulregion</span>');  
2. $sel.empty();//移除所有数据  
3. $sel.append('<li>暂不确定</li>');  
4. $.ajax({  
5.       type: "Post",  
6.       url: "../Run/ServerFree.aspx/GetStr",            
7.       data: "{'str':'fValue'}",  
8.       contentType: "application/json; charset=utf-8",  
9.       dataType: "json",  
10.       success: function (data) {  
11.            for (var i = 0; i < data.length; i++)   
12.            {  
13.               var optionvalue = data[i];  
14.               //填充数据到li  
15.               $sel.append("<li>" + optionvalue.REGIONNAME + "</li>");  
16.            }  
17.       },  
18.       error: function (err) {  
19.           alert(err);  
20.       }  
21. });  

但有时候，会给li加一些效果如，下拉流动条效果，不能移除所有元素，只需要移除指定元素，则可以

使用$sel.find("li").remove();  替换$sel.empty();

HTML页面：

[html]  view plain  copy

1. <dl class="check_direc selectBox_sec short_select quarters" id="region">  
2.   <dt class="cirticl">小汤山<em></em></dt>  
3.   <dd class="scrollDd" style="display: none;">  
4.       <ul class="area mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar" id="ulRegion" style="position: relative; overflow: visible;">  
5.       <div id="mCSB_2" class="mCustomScrollBox mCS-minimal mCSB_vertical mCSB_outside" tabindex="0" style="max-height: 300px;"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">                                  
6.       <li>暂不确定</li><li>小汤山</li><li>西三旗</li><li>天通苑</li><li>沙河</li><li>龙泽</li><li>立水桥</li><li>霍营</li><li>回龙观</li><li>昌平其它</li><li>北七家</li>  
7.       </div>  
8.       </div>  
9.       <div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-minimal mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; top: 0px; display: block; height: 188px; max-height: 266px;" oncontextmenu="return false;">  
10.       <div class="mCSB_dragger_bar" style="line-height: 50px;">  
11.       </div></div>  
12.       <div class="mCSB_draggerRail">  
13.       </div></div></div></ul>  
14.   </dd>  
15. </dl>  

转自：http://blog.csdn.net/lqh4188/article/details/40347879