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>