1
よりも新しいものでは働いていない私はjQueryとAjaxのを使用して自動投入ボックスに、このチュートリアルを通過されています： http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/自動投入セレクトボックス - 1.3.2
とデモで作者はjQueryバージョン1.2.3を実行しています。ローカルでは、jQuery 1.3.2で関数を実行することができました。それ以上のバージョンでは動作していません（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で動作しますか？
ありがとうございました！
EDIT：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>
これは心配です...この**は**完全にjsfiddleで動作しますが、マシンにjsfiddleコードをコピーしても動作しません。オリジナルの投稿をチェックしますか（HTMLファイル全体を追加するために編集しました）？私はおそらく何か間違っている。 – aramaz
元の投稿の最後のHTMLファイルのスクリプトに '$（function（）{'がありませんでした）ありがとうございました – aramaz
助けができてうれしいです。 –