Home/ Questions/Q 4013492
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T09:22:42+00:00

I have been going through this tutorial on auto-populating boxes using jQuery and Ajax:

  • 0

I have been going through this tutorial on auto-populating boxes using jQuery and Ajax:
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

and in the demo the author is running jQuery version 1.2.3. Locally I managed to get the function running on jQuery 1.3.2. but running it on any version above that one is not working (the second box is not populating).

Here is the jQuery code:

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

This is the HTML code:

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

This is the server-side 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;
}?>

How do I rewrite this function so it works with, for example, jQuery 1.5?

Thanks for the help!

EDIT: Mark’s solution worked, this is the HTML file with everything in it, and it should be relatively easy to adapt it to read a saved json file.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming your json is valid you should be able to use the following:

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

    Updated to use your markup in the question on jsfiddle.

    • 0