0
最初のドロップダウンから与えられた選択に基づいて、2番目の選択ドロップダウンを動的にロードしようとしています。私はここに与えられた例を試しましたが、自分でそれを働かせるようには見えません。アラート入力値が変更されたが、入力値が変更された2メッセージは表示されません。元の例:PHP MYSQL dynamic select boxPHP Javascript動的選択ボックス
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="select1" onchange="createSelect2()">
<option value="">Select sth</option>
<option value="1">1st option</option>
<option value="2">2nd option</option>
<option value="3">3rd option</option>
</select>
<select id="select2" onchange="selectSelect2">
<option value="">Select from select1 first</option>
</select>
<script>
$('#select1').change(createSelect2);
$('#select2').change(selectSelect2);
function createSelect2(){
alert("The input value has changed.") ;
var option = $(this).find(':selected').val(),
dataString = "option="+option;
if(option != '')
{
alert("The input value has changed 2. The new value is: " + option);
$.ajax({
type : 'GET',
url : 'http://www.mitilini-trans.gr/demo/test.php',
data : dataString,
dataType : 'JSON',
cache: false,
success : function(data) {
var output = '<option value="">Select Sth</option>';
$.each(data.data, function(i,s){
var newOption = s;
output += '<option value="' + newOption + '">' + newOption + '</option>';
});
$('#select2').empty().append(output);
},
error: function(){
console.log("Ajax failed");
}
});
}
else
{
console.log("You have to select at least sth");
}
}
function selectSelect2(){
var option = $(this).find(':selected').val();
if(option != '')
{
alert("You selected: "+option);
}
else
{
alert("You have to select at least sth");
}
}
</script>
</body>
</html>
関数内の '$(this)'は何ですか?あなたはそれを確認しましたか? –
わかりません。元の例はjsfiddle http://jsfiddle.net/g3Yqq/2/ – kc3ase
に表示されています。開発者コンソールのエラーはありますか? –