Автоматическое заполнение полей выбора с использованием jQuery и Ajax - не работает ни в чем более новом, чем 1.3.2 - PullRequest
Новая
       3

Автоматическое заполнение полей выбора с использованием jQuery и Ajax - не работает ни в чем более новом, чем 1.3.2

1 голос
/ 01 марта 2011

Я проходил этот урок по автоматическому заполнению ящиков с использованием 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?

Спасибо заhelp!

РЕДАКТИРОВАТЬ: решение Марка сработало, это 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>

Ответы [ 4 ]

1 голос
/ 01 марта 2011

Предполагая, что ваш 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 .

0 голосов
/ 30 октября 2016 
<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>
0 голосов
/ 07 марта 2012

Aramaz @Edit работает, потому что не использует JSON.Проблема связана с тем фактом, что способ анализа JSON при помощи jquery был изменен на 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'}]

0 голосов
/ 01 марта 2011

Попробуйте: 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...