如何使用JSON數據填充選擇框的選項？

Question

我需要根據選擇的國家來餵養城市。我做了編程，但不知道如何將JSON數據放入選擇框。我嘗試了幾種使用jQuery的方法，但都沒有成功。

我得到的答覆（我可以格式化此不同，如果有必要）：

["<option value='Woodland Hills'>Woodland Hills<\/option>","<option value='none'>none<\/option>","<option value='Los Angeles'>Los Angeles<\/option>","<option value='Laguna Hills'>Laguna Hills<\/option>"] 

但我怎麼可以把這個數據作爲HTML <select></select>標籤內的選項？

我嘗試代碼：

<form action="" method="post"> 
<input id="city" name="city" type="text" onkeyup="getResults(this.value)"/> 
<input type="text" id="result" value=""/> 
<select id="myselect" name="myselect" ><option selected="selected">blank</option></select> 
</form> 
</div> 

<script> 
function getResults(str) { 
    $.ajax({ 
     url:'suggest.html', 
     type:'POST', 
     data: 'q=' + str, 
     dataType: 'json', 
     success: function(json) { 
      $('#myselect').append(json); 

     } 
    }); 
}; 

$('.suggest').keyup(function() { 
    getResults($(this).val()); 
}); 
</script> 

我還試圖用這個tutorial on auto-populating select boxes using jQuery and AJAX，但從來沒有任何東西，除了填充我的選擇與「未定義」對我來說，即使我得到了在格式教程響應建議。

<script type="text/javascript" charset="utf-8"> 
$(function(){ 
    $("select#city").change(function(){ 
    $.getJSON("/select.php",{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#myselect").html(options); 
    }) 
    }) 
}) 
</script> 

Answer 1

你應該做的是這樣的：

function getResults(str) { 
    $.ajax({ 
     url:'suggest.html', 
     type:'POST', 
     data: 'q=' + str, 
     dataType: 'json', 
     success: function(json) { 
      $.each(json, function(i, optionHtml){ 
       $('#myselect').append(optionHtml); 
      }); 
     } 
    }); 
}; 

乾杯

Answer 2

爲什麼不只是使服務器返回的名字呢？

["Woodland Hills", "none", "Los Angeles", "Laguna Hills"] 

然後使用JavaScript創建<option>元素。

$.ajax({ 
    url:'suggest.html', 
    type:'POST', 
    data: 'q=' + str, 
    dataType: 'json', 
    success: function(json) { 
     $.each(json, function(i, value) { 
      $('#myselect').append($('<option>').text(value).attr('value', value)); 
     }); 
    } 
}); 

Answer 3

由於返回的JSON從您：//site.com：

[{text:"Text1", val:"Value1"}, 
{text:"Text2", val:"Value2"}, 
{text:"Text3", val:"Value3"}] 

使用此：

$.getJSON("your://site.com", function(json){ 
      $('#select').empty(); 
      $('#select').append($('<option>').text("Select")); 
      $.each(json, function(i, obj){ 
        $('#select').append($('<option>').text(obj.text).attr('value', obj.val)); 
      }); 
    }); 

Answer 4

在JQuery view engine看一看，只是數組加載到一個下拉列表：

$.ajax({ 
    url:'suggest.html', 
    type:'POST', 
    data: 'q=' + str, 
    dataType: 'json', 
    success: function(json) { 
      // Assumption is that API returned something like:["North","West","South","East"]; 
      $('#myselect').view(json); 
    } 
}); 

查看詳細信息她e：https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

Answer 5

zeusstl是對的。它也適用於我。

<select class="form-control select2" id="myselect"> 
         <option disabled="disabled" selected></option> 
         <option>Male</option> 
         <option>Female</option> 
        </select> 

    $.getJSON("mysite/json1.php", function(json){ 
     $('#myselect').empty(); 
     $('#myselect').append($('<option>').text("Select")); 
     $.each(json, function(i, obj){ 

    $('#myselect').append($('<option>').text(obj.text).attr('value', obj.val)); 
     }); 
    });