Jquery 填充选择列表答案

【问题标题】：Jquery populate selection listJquery 填充选择列表
【发布时间】：2011-04-19 20:10:39
【问题描述】：

我正在使用 Jquery 和 Ajax 函数从 MySql 获取数据并将其放在一个 div 中，我可以在其中选择它们。

它是这样工作的：

当我从列表中选择一个国家时，Jquery 运行一个函数来使用 getJson 显示所选国家的城市列表。该列表显示在“inputString”div 中。

现在我想在 html 选择表单中显示相同的数据，而不是像现在这样在 DIV 中显示。

HTML 看起来像：

<select name="country" id="country" class="country">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="serbia">Serbia</option>
</select>

<input size="30" id="inputString" type="text" name="inputString"  class="inp"/>
<div class="suggestionList" id="autoSuggestionsList"></div>

jquery：

$(document).ready(function () {
    $("#inputString").keyup(function () { // inputString is DIV where list of cities are listed
        var up_country = $("#country option:selected").val();
        $.getJSON("cities.php?queryString=" + up_country + "", function (data) {
            if (data.length > 0) {
                $.each(data, function (i, data) {
                    var city = data.city;
                    if (i < 19) {
                        $('#autoSuggestionsList').append('<li class="k' + i + '">' + city + '</li>');
                    }
                });
            }
        });
    });
});

如果选择的国家/地区是英国，我如何在 html 选择表单中显示所选国家/地区的城市列表？

  <select name="city" id="city" class="city">
  <option value='London'>London</option>
  <option value='Manchester'>Manchester</option>
  <option value='Salford'>Salford</option>
  </select>

【问题讨论】：

标签： php jquery mysql

【解决方案1】：

$('#country').after('<select name="city" id="city" class="city"/>');
$.each(data, function(index, datum){
    $('#city').append($('<option/>').val(datum).text(datum));
});

【讨论】：

【解决方案2】：

尝试类似的方法-
在您的 html 中：

<select name="city" id="city" ></select>

和你的 jQuery 代码：

$.each(data, function(i, data){
var city = data.city;
if(i < 19){
$('#city').append('<option>'+ city+ '</option>');

       }
}

【讨论】：

【解决方案3】：

<select class="suggestionList" id="autoSuggestionsList"></select>
<script>
$.getJSON("cities.php?queryString=" + up_country +"", function(data) { 
  var content = '';

  $.each(data, function(){
    content += '<option value="' + this.city + '">' + this.city + '</option>';
  });

  $('#autoSuggestionsList').html(content);
});
</script>

【讨论】：

【解决方案4】：

来自 php 的响应可以是表单或任何其他 html 内容。如果您不一定需要使用 jquery 填充列表，则可以从 php 加载 html

--例如--

来自 php 的响应

echo '<form>
       <select>
            <option>London</option>
            <option>Manchester</option>
            <option>Salford</option>
       </select>
      </form>
';

ajax 加载的内容

$('#citiesList').html(data);

【讨论】：