2017-07-29 52 views
1

嗨大家即時創建一個頁面依賴下拉,使用jquery,我想縣,州區,曼達和城市我想依賴下拉如何寫代碼爲這,即時嘗試編寫的代碼,但沒有工作,請任何人給我這個解決方案,我的代碼是給出下面plase檢查,並給我這個解決方案,即時嘗試解決這個問題,但沒有得到這個解決方案,請給解決方案jquery dependend drop down,contry,state,district and city not working

$(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> 



+0

你必須要具體什麼不工作,或者我們無法幫助你。此<選擇name = 「國家」 ID = 「國家」> – Difster

+0

HTML代碼
<選擇name = 「狀態」 ID = 「狀態」>
<選擇name = 「區」 ID = 「區」>

+0

這仍然不能告訴我什麼是不工作。 – Difster

回答

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> 

我希望它ü工作...

編輯代碼(市也正在利用這個代碼)

<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> 
+0

感謝您的重播,而代碼shring,但我wnat城市也如何寫代碼的城市,請幫我 –

+0

@shaikJilani城市代碼還加上了上面的代碼檢查它.. – Moorthy