国、州、都市の 3 つのドロップダウン ボックスがあります。
.entry.float
%label{:for => "hospital-country"} Country
= select_tag :country_id, options_for_select(["Select option"] + @countries.collect{ |c| [c.name, c.id] },@hospital.country_id),{:name =>"hospital[country_id]",:class => "select r5",:id => "hospital-country",:onchange=>"country_change()"}
.entry.float
%label{:for => "hospital-state"} State
= select_tag :state, options_for_select(["Select option"]),{:name =>"hospital[state]",:id => 'hospital-state',:class => "select r5",:disabled => true,:onchange=>"state_change()"}
.entry.float
%label{:for => "hospital-city"} City
= select_tag :city, options_for_select(["Select option"]),{:name =>"hospital[city]",:id => 'hospital-city',:class => "select r5",:disabled => true}
`が住んでいる国は?
@countries = WorldCountry.all
` および州と都市は、jquery を使用してそれぞれ国と州のドロップダウン ボックスの ajax 呼び出しによって設定されます
function country_change() {
$('#hospital-state').find('option[value!="Select option"]').remove();
$('#hospital-state').next().text("Select option");
$('#hospital-state').attr('disabled', 'disabled');
$('#hospital-city').find('option[value!="Select option"]').remove();
$('#hospital-city').next().text("Select option");
$('#hospital-city').attr('disabled', 'disabled');
if ($('#hospital-country').val() != "" && $('#hospital-country').val() != "Select option") {
$.ajax({
type : 'post',
url : '/hospitals/country_change',
data : {
country_id : $('#hospital-country').val()
},
dataType : "json",
success : function(data) {
var select = $('#hospital-state');
if (data.length > 0) {
select.removeAttr('disabled');
$.each(data, function(key, value) {
$("<option/>").val(value[1]).text(value[0]).appendTo(select);
});
}
},
failure : function() {
}
})
}
};
これはすべて機能しています。しかし、検証が失敗した場合、国の値しか保持できません。ajaxでのみ機能するStateとCitiesの値を保持する方法。