Auto-populating select boxes using jQuery and Ajax - not working in anything newer than 1.3.2

后端未结

关注

 4  805

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/

相关标签:

4条回答

无人共我

2021-01-16 04:46

Aramaz @Edit works because it does not use JSON. The problem is due to the fact tat the way in which JSON is parsed by jquery was changed at 1.4 to use the browsers native JSON parser. Therefore, all JSON properties and values shouled be put in double quotes (i.e. valid JSON format) for the response to be parsed correctly.

so this name-value array will be parsed correctly:

[ {"optionValue": "0", "optionDisplay": "Mark"}, {"optionValue":"1", "optionDisplay": "Andy"}, {"optionValue":"2", "optionDisplay": "Richard"}]

but this will not be parsed correctly by the newer JQuery versions:

[ {optionValue: 0, optionDisplay: 'Mark'}, {optionValue:1, optionDisplay: 'Andy'}, {optionValue:2, optionDisplay: 'Richard'}]

0 讨论(0)
发布评论:

提交评论
- 加载中...

闹比i

2021-01-16 04:50

<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 讨论(0)

长发绾君心

2021-01-16 04:51

Try:

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

EDIT: An alternative approach

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

credit: http://www.electrictoolbox.com/jquery-add-option-select-jquery/

0 讨论(0)

情书的邮戳

2021-01-16 04:59

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 讨论(0)