Question

我一直在使用jQuery和Ajax编写关于自动填充框的教程： http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

在演示中，作者正在运行jQuery 1.2.3版。本地我设法在jQuery 1.3.2上运行该函数。但是在任何一个以上的版本上运行它都不能正常工作（第二个框没有填充）。

这是jQuery代码：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
  $("select#ctlJob").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#ctlPerson").html(options);
    })
  })
})
</script>

这是HTML代码：

<form action="/select_demo.php">
  <label for="ctlJob">Job Function:</label>
  <select name="id" id="ctlJob">
    <option value="1">Managers</option>
    <option value="2">Team Leaders</option>
    <option value="3">Developers</option>
  </select>
  <noscript>
    <input type="submit" name="action" value="Load Individuals" />
  </noscript>
  <label for="ctlPerson">Individual:</label>
  <select name="person_id" id="ctlPerson">
    <option value="1">Mark P</option>
    <option value="2">Andy Y</option>
    <option value="3">Richard B</option>
  </select>
<input type="submit" name="action" value="Book" />
</form>

这是服务器端PHP：

<?php
if ($_GET['id'] == 1) {
  echo <<<HERE_DOC
[ {optionValue: 0, optionDisplay: 'Mark'}, {optionValue:1, optionDisplay: 'Andy'}, {optionValue:2, optionDisplay: 'Richard'}]
HERE_DOC;
} else if ($_GET['id'] == 2) {
  echo <<<HERE_DOC
[{optionValue:10, optionDisplay: 'Remy'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]
HERE_DOC;
} else if ($_GET['id'] == 3) {
  echo <<<HERE_DOC
[{optionValue:20, optionDisplay: 'Aidan'}, {optionValue:21, optionDisplay:'Russell'}]
HERE_DOC;
}?>

如何重写此函数，以便它可以使用，例如，jQuery 1.5？

感谢您的帮助！

编辑：Mark的解决方案有效，这是包含所有内容的HTML文件，应该相对容易地调整它以读取已保存的json文件。

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Select test</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
                 $(function(){
                    var data = [
                                [
                                    {optionValue: 0,optionDisplay: 'Mark'},
                                    {optionValue: 1,optionDisplay: 'Andy'},
                                    {optionValue: 2,optionDisplay: 'Richard'}
                                    ],
                                [
                                    {optionValue: 10,optionDisplay: 'Remy'},
                                    {optionValue: 11,optionDisplay: 'Arif'},
                                    {optionValue: 12, optionDisplay: 'JC'}
                               ],
                                [
                                    {optionValue: 20,optionDisplay: 'Aidan'},
                                    {optionValue: 21,optionDisplay: 'Russell'}
                                   ]
                               ];


                    $("#ctlJob").change(function() {
                        var $persons = $("#ctlPerson").empty();
                        $.each(data[$(this).val() - 1], function() {
                            $persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
                        });
                    });
                })    
                </script>
    </head>

    <body>
            <form action="/select_demo.php">
                <label for="ctlJob">Job Function:</label>
                <select name="id" id="ctlJob">
                    <option value="1">Managers</option>
                    <option value="2">Team Leaders</option>
                    <option value="3">Developers</option>
                </select>
                <noscript>
                    <input type="submit" name="action" value="Load Individuals" />
                </noscript>
                <label for="ctlPerson">Individual:</label>
                <select name="person_id" id="ctlPerson">
                    <option value="1">Mark P</option>
                    <option value="2">Andy Y</option>
                    <option value="3">Richard B</option>
                </select>
                <input type="submit" name="action" value="Book" />
            </form>
    </body>
</html>

Answer 1

假设您的json有效，您应该能够使用以下内容：

 $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(data){
      var $persons = $("#ctlPerson").empty();
      $.each(data, function() {
        $persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
      });
    })
  });

已更新，可在jsfiddle上的问题中使用您的标记。

Answer 2

尝试：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      for (var i = 0; i < j.length; i++) {
        $('<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>').appendTo($("select#ctlPerson"));
      }
    })
  })
})
</script>

编辑：另一种方法

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = $("select#ctlPerson").attr('options');
      for (var i = 0; i < j.length; i++) {
        options[options.length] = new Option(j[i].optionDisplay, j[i].optionValue);
      }
    })
  })
})
</script>

信用：http://www.electrictoolbox.com/jquery-add-option-select-jquery/

Answer 3

Aramaz @Edit有效，因为它不使用JSON。问题是由于jquery解析JSON的方式在1.4处更改为使用浏览器本机JSON解析器。因此，所有JSON属性和值都应该用双引号（即有效的JSON格式）放置，以便正确解析响应。

所以这个名称 - 值数组将被正确解析：

[{“optionValue”：“0”，“optionDisplay”：“Mark”}，{“optionValue”：“1”，“optionDisplay”：“Andy”}，{“optionValue”：“2”，“ optionDisplay“：”Richard“}]

但是新的JQuery版本无法正确解析它：

[{optionValue：0，optionDisplay：'Mark'}，{optionValue：1，optionDisplay：'Andy'}，{optionValue：2，optionDisplay：'Richard'}]

Answer 4

<html><body>
<head>

<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>



<script type="text/javascript" charset="utf-8">
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/api_test.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#ctlPerson").html(options);
})
})
})
</script>
<!-- [{optionValue:20, optionDisplay: 'Aidan'}, {optionValue:21, optionDisplay:'Russell'}] -->

<script type="text/javascript">
             $(function(){
                var data = [
                            [
                                {optionValue: 0,optionDisplay: 'Mark'},
                                {optionValue: 1,optionDisplay: 'Andy'},
                                {optionValue: 2,optionDisplay: 'Richard'}
                                ],
                            [
                                {optionValue: 10,optionDisplay: 'Remy'},
                                {optionValue: 11,optionDisplay: 'Arif'},
                                {optionValue: 12, optionDisplay: 'JC'}
                           ],
                            [
                                {optionValue: 20,optionDisplay: 'Aidan'},
                                {optionValue: 21,optionDisplay: 'Russell'}
                               ]
                           ];


           $("select#ctlJob").change(function() {
          var $persons = $("#ctlPerson").empty();
          $.each(data[$(this).val() - 1], function() {
          $persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
                  });
                });
            })    
            </script>
</head>
<form action="api_test.php">
<label for="ctlJob">Job Function:</label>
<select name="id" id="ctlJob">
<option value="1">Managers</option>
<option value="2">Team Leaders</option>
<option value="3">Developers</option>
</select>
<noscript>
<input type="submit" name="action" value="Load Individuals" />
</noscript>
<label for="ctlPerson">Individual:</label>
<select name="person_id" id="ctlPerson">
<option value="1">Mark P</option>
<option value="2">Andy Y</option>
<option value="3">Richard B</option>
</select>
<input type="submit" name="action" value="Book" /></form>
</body></html>

使用jQuery和Ajax自动填充选择框 - 不适用于比1.3.2更新的任何东西

4 个答案: