如何使用 JSON 数据填充选择框的选项？

IT技术 javascript jquery html json
2021-02-24 11:44:18

我需要根据选择的国家/地区来喂养城市。我以编程方式做到了，但不知道如何将 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>

我还尝试使用本教程使用 jQuery 和 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>
6个回答

为什么不让服务器返回名称？

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

然后<option>使用 JavaScript创建元素。

$.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));
        });
    }
});
还有一件事，在添加您的选项之前，您如何清理现有选项？
2021-04-18 11:44:18
谢谢你的回答。不过，不应该是“GET”类型吗？
2021-04-23 11:44:18
@Dennis：您可以添加selected属性。使用 jQuery，我相信您使用.prop('selected', true).
2021-04-25 11:44:18
我找到了这个解决方案 $('#mySelect')[0].options.length = 0; 除非有人知道更好
2021-05-03 11:44:18
您是否看到了一种也可以选择其中一个选项的简单方法？
2021-05-13 11:44:18

鉴于从您的://site.com 返回的 json：

[{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));
            });
    });

你应该这样做：

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);
           });
        }
    });
};

干杯

@Pizdabol：不客气。您能否“检查”我的解决方案是否已被接受？
2021-04-24 11:44:18

看看JQuery 视图引擎，然后将数组加载到下拉列表中：

$.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);
    }
});

在此处查看详细信息：https : //jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

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));
        });
  });
其它你可能感兴趣的问题
上一篇如何在NodeJs的内存中下载和解压缩zip文件？ 下一篇为什么不在页面内容中使用 iframe 的好理由