1. 程式人生 > >通過Ajax實現select動態載入option

通過Ajax實現select動態載入option

JQuery通過ajax實現select動態載入option

<script type="text/javascript">
//jquery採用ajax對select動態載入option
$('#productId').change(function () {
    //清空select框中資料
   $('#accountId').empty();
   $.ajax({
       url: Feng.ctxPath + "/futuresManualTradingRecord/updateAccountIdList/" + $('#productId').val(),
       type: "get",
       contentType: "application/json;charset=utf-8",
       dataType: "json",
       json: 'callback',
       success: function (json) {
           $('#accountId').append("<option value='0'>--請選擇賬戶編號資訊--</option>");
           //遍歷成功返回的json資料,取出對應內容進行展示
           $.each(json, function (index,item) {
               var productName = json[index].ProductName;
               var brokerName = json[index].BrokerName;
               //構造動態option
               $('#accountId').append("<option value='"+productName+"'>"+brokerName+"</option>")
           });
       },
       error: function () {
           alert("更新賬戶編號列表錯誤");
           location.reload();
       }
   });
});
</script>