( ´_ゝ`)φ 寫寫程式、做做筆記！！！: 使用 JQuery 的 ajax 建立 select 清單以及如何在 onchange 事件時，取得value及text值

如何利用 ASP.NET 的 ashx 建立 select 下拉式選單(如下圖)，我利用了 JQuery 做了一個可以取得 Json 並放入 select 的範例

HTML select 清單

==================== <head> =============================

<!-- 使用 JQuery 需加入 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

==================== <body> =============================

<select id="select" class="styled-select" onchange = "onSelectTown()" ></select>

==================== <javascript> =============================

jQuery.support.cors = true;
$.ajax({
   url: 'http://' + window.location.host + '/您的ashp名稱路徑.ashx',
   type: "GET",
   dataType: 'text',
   success: function (msg) {
     var jsonObj = JSON.parse(msg);

     //放入一筆空白的清單
     $("[id$=select]").append($("<option></option>").attr("value", "").text(""));

     for (var i = 0; i < jsonObj.length; i++) {

     //將取得的Json一筆一筆放入清單
     $("[id$=select]").append($("<option></option>").attr("value", jsonObj[i].LAND_ID).text(jsonObj[i].LAND_NAME));
     }
   },
   error: function (xhr, ajaxOptions, thrownError) {
     alert(xhr.status);
   }
});

==================== <javascript> =============================

   //當選擇了行政區
   function onSelectTown() {
     var sel_text = $("[id$=select]").find("option:selected").text()
     var sel_val = $("[id$=select]").val();
     alert(sel_text); //可以取得 select.text
     alert(sel_val);  //可以取得 select.value
   }

( ´_ゝ`)φ 寫寫程式、做做筆記！！！

2014年5月5日

使用 JQuery 的 ajax 建立 select 清單以及如何在 onchange 事件時，取得value及text值

沒有留言:

張貼留言