js前端取服务器控件的值

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

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

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

页面示例：

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

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

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

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

2.JQuery移除指定元素

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

 <ul class="area" id="ulregion"> 
</ul>

JS示例

var $sel = $('#<span style="font-family: Arial, Helvetica, sans-serif;">ulregion</span>');
$sel.empty();//移除所有数据
$sel.append('<li>暂不确定</li>');
$.ajax({
      type: "Post",
      url: "../Run/ServerFree.aspx/GetStr",          
      data: "{'str':'fValue'}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (data) {
           for (var i = 0; i < data.length; i++) 
           {
              var optionvalue = data[i];
              //填充数据到li
              $sel.append("<li>" + optionvalue.REGIONNAME + "</li>");
           }
      },
      error: function (err) {
          alert(err);
      }
});

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

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

HTML页面：

<dl class="check_direc selectBox_sec short_select quarters" id="region">
  <dt class="cirticl">小汤山<em></em></dt>
  <dd class="scrollDd" style="display: none;">
      <ul class="area mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar" id="ulRegion" style="position: relative; overflow: visible;">
      <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">                                
      <li>暂不确定</li><li>小汤山</li><li>西三旗</li><li>天通苑</li><li>沙河</li><li>龙泽</li><li>立水桥</li><li>霍营</li><li>回龙观</li><li>昌平其它</li><li>北七家</li>
      </div>
      </div>
      <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;" οncοntextmenu="return false;">
      <div class="mCSB_dragger_bar" style="line-height: 50px;">
      </div></div>
      <div class="mCSB_draggerRail">
      </div></div></div></ul>
  </dd>
</dl>