jquery dependend drop down，contry，state，district and city not working

时间：2017-07-29 05:59:27

标签： jquery

大家好我创建一个页面依赖下拉，使用jquery，我想要县，州区，mandal和城市我想依赖下拉如何为此编写代码，我试图编写代码但不工作请任何人给我解决方案，我的代码在下面给出检查并给我解决方案，我试着解决这个但没有得到这个解决方案请给出解决方案

$(document).ready(function(){
    // Countries
    var country_arr = new Array("Select Country","AUSTRALIA","INDIA","NEW ZEALAND","USA","UAE","MAURITIUS");

    $.each(country_arr, function (i, item) {
        $('#country').append($('<option>', {
            value: i,
            text : item,
        }, '</option>' ));
    });

    // States
    var s_a = new Array();
    s_a[0]="Select State";
    s_a[1]="Select State|QUEENSLAND|VICTORIA";
    s_a[2]="Select State|ANDHRAPRADESH|KARNATAKA|TAMILNADU|DELHI|GOA|W-BENGAL|GUJARAT|MADHYAPRADESH|MAHARASHTRA|RAJASTHAN";
    s_a[3]="Select State|AUCKLAND";
    s_a[4]="Select State|NEWJERSEY|ILLINOIS";
    s_a[5]="Select State|DUBAI";
    s_a[6]="Select State|MAURITIUS";

    //district

    var d_a = new Aarry();
    d_a['ANDHRAPRADESH']="GUNTUR|KRISHNA|PRAKASHAM|NELLORE";

    // Cities
    var c_a = new Array();
    c_a['GUNTUR']="GUNTUR|NASARAOPET|PIDUGURALLA|VINUKONDA|MACHARLA|SATANAPALLI";
    c_a['KRISHNA']="VIJAYAWADA|MACHILIPATNAM|GUDIVADA";
    c_a['PRAKASHAM']="ONGOLE|CHIRALA|PARCHUR";
    c_a['NELLORE']="NELLORE|GUDUR";
    c_a['QUEENSLAND']="BRISBANE";
    c_a['VICTORIA']="MELBOURNE";
    c_a['ANDHRAPRADESH']="HYDERABAD";
    c_a['KARNATAKA']="BANGLORE";
    c_a['TAMILNADU']="CHENNAI";
    c_a['DELHI']="DELHI";
    c_a['GOA']="GOA";
    c_a['W-BENGAL']="KOLKATA";
    c_a['GUJARAT']="AHMEDABAD1|AHMEDABAD2|AHMEDABAD3|BARODA|BHAVNAGAR|MEHSANA|RAJKOT|SURAT|UNA";
    c_a['MADHYAPRADESH']="INDORE";
    c_a['MAHARASHTRA']="MUMBAI|PUNE";
    c_a['RAJASTHAN']="ABU";
    c_a['AUCKLAND']="AUCKLAND";
    c_a['NEWJERSEY']="EDISON";
    c_a['ILLINOIS']="CHICAGO";
    c_a['MAURITIUS']="MAURITIUS";
    c_a['DUBAI']="DUBAI";


    $('#country').change(function(){
        var c = $(this).val();
        var state_arr = s_a[c].split("|");
        $('#state').empty();
        $('#district').empty();
        $('#city').empty();
        if(c==0){
            $('#state').append($('<option>', {
                value: '0',
                text: 'Select State',
            }, '</option>'));
        }else {
            $.each(state_arr, function (i, item_state) {
                $('#state').append($('<option>', {
                    value: item_state,
                    text: item_state,
                }, '</option>'));
            });
        }
        $('#district').append($('<option>', {
            value: '0',
            text: 'Select district',
        }, '</option>'));
    });

    $('#state').change(function(){
        var s = $(this).val();
        if(s=='Select State'){
            $('#district').empty();
            $('#city').empty();
            $('#district').append($('<option>', {
                value: '0',
                text: 'Select District',
            }, '</option>'));
        }
        var district_arr = d_a[s].split("|");
        $('#district').empty();

        $.each(district_arr, function (j, item_district) {
            $('#district').append($('<option>', {
                value: item_district,
                text: item_district,
            }, '</option>'));
        });


    });
});
<select name="country" id="country"></select> <br>


 

1 个答案:

答案 0 :(得分：0)

试试这段代码...... 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
// Countries
var country_arr = new Array("Select Country","AUSTRALIA","INDIA","NEW ZEALAND","USA","UAE","MAURITIUS");

$.each(country_arr, function (i, item) {
    $('#country').append($('<option>', {
        value: i,
        text : item,
    }, '</option>' ));
});

// States
var s_a = new Array();
s_a[0]="Select State";
s_a[1]="Select State|QUEENSLAND|VICTORIA";
s_a[2]="Select State|ANDHRAPRADESH|KARNATAKA|TAMILNADU|DELHI|GOA|W-BENGAL|GUJARAT|MADHYAPRADESH|MAHARASHTRA|RAJASTHAN";
s_a[3]="Select State|AUCKLAND";
s_a[4]="Select State|NEWJERSEY|ILLINOIS";
s_a[5]="Select State|DUBAI";
s_a[6]="Select State|MAURITIUS";

//district

var d_a = new Array();
d_a['ANDHRAPRADESH']="GUNTUR|KRISHNA|PRAKASHAM|NELLORE";

// Cities
var c_a = new Array();
c_a['GUNTUR']="GUNTUR|NASARAOPET|PIDUGURALLA|VINUKONDA|MACHARLA|SATANAPALLI";
c_a['KRISHNA']="VIJAYAWADA|MACHILIPATNAM|GUDIVADA";
c_a['PRAKASHAM']="ONGOLE|CHIRALA|PARCHUR";
c_a['NELLORE']="NELLORE|GUDUR";
c_a['QUEENSLAND']="BRISBANE";
c_a['VICTORIA']="MELBOURNE";
c_a['ANDHRAPRADESH']="HYDERABAD";
c_a['KARNATAKA']="BANGLORE";
c_a['TAMILNADU']="CHENNAI";
c_a['DELHI']="DELHI";
c_a['GOA']="GOA";
c_a['W-BENGAL']="KOLKATA";
c_a['GUJARAT']="AHMEDABAD1|AHMEDABAD2|AHMEDABAD3|BARODA|BHAVNAGAR|MEHSANA|RAJKOT|SURAT|UNA";
c_a['MADHYAPRADESH']="INDORE";
c_a['MAHARASHTRA']="MUMBAI|PUNE";
c_a['RAJASTHAN']="ABU";
c_a['AUCKLAND']="AUCKLAND";
c_a['NEWJERSEY']="EDISON";
c_a['ILLINOIS']="CHICAGO";
c_a['MAURITIUS']="MAURITIUS";
c_a['DUBAI']="DUBAI";


$('#country').change(function(){
        alert("haii");
    var c = $(this).val();

    var state_arr = s_a[c].split("|");
    $('#state').empty();
    $('#district').empty();
    $('#city').empty();
    if(c==0){
        $('#state').append($('<option>', {
            value: '0',
            text: 'Select State',
        }, '</option>'));
    }else {
        $.each(state_arr, function (i, item_state) {
            $('#state').append($('<option>', {
                value: item_state,
                text: item_state,
            }, '</option>'));
        });
    }
    $('#district').append($('<option>', {
        value: '0',
        text: 'Select district',
    }, '</option>'));
});

$('#state').change(function(){
    var s = $(this).val();
    if(s=='Select State'){
        $('#district').empty();
        $('#city').empty();
        $('#district').append($('<option>', {
            value: '0',
            text: 'Select District',
        }, '</option>'));
    }
    var district_arr = d_a[s].split("|");
    $('#district').empty();

    $.each(district_arr, function (j, item_district) {
        $('#district').append($('<option>', {
            value: item_district,
            text: item_district,
        }, '</option>'));
    });


});
});
</script>
<select name="country" id="country"></select> <br>
<select name="state" id="state"></select> <br>
<select name="district" id="district"></select> <br>
<select name="city" id="city"></select> <br>

我希望它为你工作......

已编辑的代码（City也在使用此代码）

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
// Countries
var country_arr = new Array("Select Country","AUSTRALIA","INDIA","NEW ZEALAND","USA","UAE","MAURITIUS");

$.each(country_arr, function (i, item) {
$('#country').append($('<option>', {
    value: i,
    text : item,
}, '</option>' ));
});

// States
var s_a = new Array();
s_a[0]="Select State";
s_a[1]="Select State|QUEENSLAND|VICTORIA";
s_a[2]="Select State|ANDHRAPRADESH|KARNATAKA|TAMILNADU|DELHI|GOA|W-BENGAL|GUJARAT|MADHYAPRADESH|MAHARASHTRA|RAJASTHAN";
s_a[3]="Select State|AUCKLAND";
s_a[4]="Select State|NEWJERSEY|ILLINOIS";
s_a[5]="Select State|DUBAI";
s_a[6]="Select State|MAURITIUS";

//district

var d_a = new Array();
d_a['ANDHRAPRADESH']="GUNTUR|KRISHNA|PRAKASHAM|NELLORE";

// Cities
var c_a = new Array();
c_a['GUNTUR']="GUNTUR|NASARAOPET|PIDUGURALLA|VINUKONDA|MACHARLA|SATANAPALLI"; 
c_a['KRISHNA']="VIJAYAWADA|MACHILIPATNAM|GUDIVADA";
c_a['PRAKASHAM']="ONGOLE|CHIRALA|PARCHUR";
c_a['NELLORE']="NELLORE|GUDUR";
c_a['QUEENSLAND']="BRISBANE";
c_a['VICTORIA']="MELBOURNE";
c_a['ANDHRAPRADESH']="HYDERABAD";
c_a['KARNATAKA']="BANGLORE";
c_a['TAMILNADU']="CHENNAI";
c_a['DELHI']="DELHI";
c_a['GOA']="GOA";
c_a['W-BENGAL']="KOLKATA";
c_a['GUJARAT']="AHMEDABAD1|AHMEDABAD2|AHMEDABAD3|BARODA|BHAVNAGAR|MEHSANA|RAJKOT|SURAT|UNA";

c_a['MADHYAPRADESH']="INDORE";
c_a['MAHARASHTRA']="MUMBAI|PUNE";
c_a['RAJASTHAN']="ABU";
c_a['AUCKLAND']="AUCKLAND";
c_a['NEWJERSEY']="EDISON";
c_a['ILLINOIS']="CHICAGO";
c_a['MAURITIUS']="MAURITIUS";
c_a['DUBAI']="DUBAI";


$('#country').change(function(){

var c = $(this).val();

var state_arr = s_a[c].split("|");
$('#state').empty();
$('#district').empty();
$('#city').empty();
if(c==0){
    $('#state').append($('<option>', {
        value: '0',
        text: 'Select State',
    }, '</option>'));
}else {
    $.each(state_arr, function (i, item_state) {
        $('#state').append($('<option>', {
            value: item_state,
            text: item_state,
        }, '</option>'));
    });
}
$('#district').append($('<option>', {
    value: '0',
    text: 'Select district',
}, '</option>'));
 $('#city').append($('<option>', {
    value: '0',
    text: 'Select City',
}, '</option>'));
});

$('#state').change(function(){
var s = $(this).val();
if(s=='Select State'){
    $('#district').empty();
    $('#city').empty();
    $('#district').append($('<option>', {
        value: '0',
        text: 'Select District',
    }, '</option>'));
}
var district_arr = d_a[s].split("|");


$.each(district_arr, function (j, item_district) {
    $('#district').append($('<option>', {
        value: item_district,
        text: item_district,
    }, '</option>'));
});


});
$('#district').change(function(){

var sc = $(this).val();
if(sc=='Select District'){

    $('#city').empty();
    $('#city').append($('<option>', {
        value: '0',
        text: 'Select City',
    }, '</option>'));
}
var city_arr = c_a[sc].split("|");


$.each(city_arr, function (j, item_city) {
    $('#city').append($('<option>', {
        value: item_city,
        text: item_city,
    }, '</option>'));
});


});
$('#city').change(function(){

var city = $(this).val();
alert(city);

});
});
</script>
<select name="country" id="country"></select> <br>
<select name="state" id="state"></select> <br>
<select name="district" id="district"></select> <br>
<select name="city" id="city"></select> <br>
相关问题
最新问题