使用JSON數據填充下拉菜單

我打算使用AJAX根據另一個下拉列表的選擇填充下拉框。我跟着一個使用jQuery的教程 - http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/，並且改變了腳本中選擇框名稱中的選擇框ID名稱。使用JSON數據填充下拉菜單

時，有一個變化的主要複選框AJAX發送的值，如下返回：

{"1":"Kieran Hutchinson","2":"Caleb Tan","3":""}

這是於在教程的代碼看起來像這樣返回的JSON字符串略有不同

[{optionValue:10, optionDisplay: 'Remy'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]

我在想這是問題，但我不知道如何從我的JSON響應中獲得正確的值。

的JavaScript是如下：提前

$(function(){ 
      $("select#ContactCompanyId").change(function(){ 
       $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){ 
       var options = ''; 
       for (var i = 0; i < j.length; i++) { 
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; 
      } 
       $("select#QuoteContactId").html(options); 
       }) 
      }) 
     })

感謝

來源

2010-02-05 kwhohasamullet

你的問題是這條線：

options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

正在期望以教程的格式發送數據。你的是一種不同的格式。嘗試：

options += '<option value="' + i + '">' + j[i] + '</option>';

您將'value'作爲索引-i，將值作爲該鍵的值，j [i]。所以你會最終選擇標籤應該是這樣的：

<option value="1">Kieran Hutchinson</option>

解釋得：原始數據是格式是這樣的：

// The tutorial data 
array[0]['optionValue'] = 10; 
array[0]['optionDisplay'] = 'Remy'; 

// Your data 
array[1] = 'Kieran Hutchinson';

還，如果這是返回的實際數據在你的榜樣，你的迭代for (var i = 0; i < j.length; i++)會因爲你沒有使用爲0的指數開始for(i in j) { ... }

來源

2010-02-05 07:17:08 Erik

由於JSON可視爲關聯數組也，你可以這樣做水木清華這樣的：

$(function(){ 
     $("select#ContactCompanyId").change(function(){ 
      $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){ 
      var options = ''; 
      for (key in j) { 
       options += '<option value="' + key + '">' + j[key]+ '</option>'; 
      } 
      $("select#QuoteContactId").html(options); 
      }) 
     }) 
})

更多信息關於JSON可以在這篇文章中找到 - "Mastering JSON"

來源

2010-02-05 07:16:48 Darmen

如果數組不以0指標開始，將其轉換成JSON對象與鍵和值，而不是失敗數組。只需使用$.each循環，獲取密鑰（即1）和值（即，Kieran Hutchinson）：

$(function(){ 
    $("select#ContactCompanyId").change(function(){ 
    $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){ 
     var options = ''; 
     $.each(j, function(key, value){ 
     options += '<option value="' + key + '">' + value + '</option>'; 
     }) 
     $("select#QuoteContactId").html(options); 
    }) 
    }) 
})

來源

2010-02-05 07:18:17

如果你可以稍微改變你的迴應返回值和文本鍵在JSON：

[{value:10, text: 'Remy'}, {value:11, text: 'Arif'}, {value:12, text: 'JC'}]

你可以使用JQuery view engine和公正的數組加載到一個下拉列表：

$.getJSON("contactList", 
      {id: $(this).val(), ajax: 'true'}, 
      function(j){ 
       $("select#QuoteContactId").view(response); 
      })

詳情請看這裏：https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

來源

2017-12-09 11:03:43

使用JSON數據填充下拉菜單

回答

相關問題