在php中使用jquery / ajax创建两个相互依赖的下拉列表

时间:2012-05-03 06:37:42

标签: php jquery ajax

我有两个下拉列表框。一个用于选择国家,另一个用于选择州。如果我选​​择国家下拉列表框并从中选择一个国家,则自动将该国家的相应状态显示在使用jquery或ajax在php中显示dropdownlist框。(对于某些国家/地区的州字段将为空,此时状态选择框应显示空文本框) 可以任何人建议解决方案 提前谢谢.....

1 个答案:

答案 0 :(得分:2)

在HTML中

<select id="Country"></select>
<select id="State"></select>

IN SCRIPT

var Country = ['NEPAL', 'USA', 'CHINA'];
var NepalState = ['Gandaki', 'Bagmati'];
var USAState = ['Texas', 'California'];
var ChinaState = ['Phing', 'xing'];
$('#Country').change(function() {
    var stateOption=''; 
var countryvar = $('#Country option:selected').val();
switch (countryvar) {
case 'NEPAL':
    $.each(NepalState, function(index, value) {
        stateOption += '<option>' + value + '</option>';
    });
    break;
case 'USA':
    $.each(USAState, function(index, value) {
        stateOption += '<option>' + value + '</option>';
    });
    break;
case 'CHINA':
    $.each(ChinaState, function(index, value) {
        stateOption += '<option>' + value + '</option>';
    });
    break;
}
$('#State').html('');
$('#State').append(stateOption);
});
var CountryOption='';
$.each(Country, function(index, value) {
CountryOption += '<option>' + value + '</option>';

});
$('#Country').append(CountryOption); 
$('#Country').trigger('change');

当您根据所选更改的值更改第一个选项时,您所要做的就是在第二个选择中加载选项。
演示位于http://jsfiddle.net/Simplybj/YSMN3/4/