Jquery填充选择列表

时间:2011-04-19 20:10:39

标签: php jquery mysql

我正在使用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>

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

尝试类似的事情 -
在你的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>');

       }
}

答案 2 :(得分:0)

<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>

答案 3 :(得分:0)

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

,你可以从php加载html

- 例如 -

来自php的回复

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


ajax加载内容

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