動的ドロップダウンを作成する必要があります。最初のドロップダウンの値に基づいて、2 番目のドロップダウンのデータをロードできます。その後、ドロップダウンの新しい行も追加する必要があります。新しいドロップダウン行を追加できます。しかし、新しく追加されたドロップダウンの値を動的にロードすることはできません。
これは、2 番目のドロップダウンのデータをロードするための jQuery です。
<script type="text/javascript">
$(document).ready(function(){
$("#state").change(function() {
alert('ok');
var state = $("#state :selected").text();
$.ajax({
url:"http://localhost:8888/ajax/search_attendee.php",
type:"post",
data:'state='+ state,
dataType: "html",
success:function(data){
$("#trainer").html(data);
}
});
});
});
</script>
これは、新しい行をロードするための jQuery です。この関数で行を追加できます。しかし、2 番目のドロップダウンのデータを読み込めません。誰でもこれを行うのを手伝ってもらえますか?
<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;
$('#addNew').live('click', function() {
$('<p>'+
'<table id="datatable"><tr><td width="220"></td><td>'+
'<select name="state_' + i +'" id="state">'+
'<option value="0">Select State</option>'+
'<option value="1">QLD</option>'+
'<option value="2">NSW</option>'+
'<option value="3">VIC</option>'+
'<option value="4">WA</option>'+
'<option value="5">ACT</option>'+
'<option value="6">NT</option>'+
'<option value="7">SA</option>'+
'<option value="8">TAS</option>'+
'</select>'+
'<select name="trainer_' + i +'" id="trainer"><option>Select Trainer</option></select>'+
'<a href="#" id="remNew">Remove</a></td></tr></table></p>').appendTo(addDiv);
i++;
});
$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
});
});
</script>