问题是它在Firefox中完全正常但在Google Chrome中无效。在谷歌浏览器第二个列表没有像在Firefox中那样填充，我错过了明显的？请帮帮我，下面是我的剧本
$(document).ready(function () {
var districts = ['Choose District', 'Yadgir', 'Gadag', 'Kalaburagi', ' Karwar', 'Tumakuru', 'Shivamogga', 'Kolar', 'Ramanagara ', 'Mandya', 'Madikeri ', 'Haveri', 'Dharwad', 'Bengaluru', 'Bagalkot', 'Ballari', ' Karwar', 'Hassan', 'Bidar', 'Davanagere', 'Vijayapura', 'Mangaluru', 'Chamarajanagar', 'Chitradurga', 'Chikkamagaluru', 'Udupi', 'Koppal', 'Raichur', 'Ramanagara ', 'Mysuru', 'Shivamogga'];
var cities =
{
'Yadgir': ['Shahpur', 'Shorapur', 'Yadgir'],
'Hassan': ['HoleNarsipura', 'Arsikere', 'Channarayapattana', 'Belur', 'Arkalgud', 'Alur', 'Sakleshpur'],
' Karwar': ['Ankola', ' Bhatkal', ' Haliyal ', 'Honnavar ', 'Joida', ' Karwar', ' Kumta ', 'Mundgod', ' Siddapur', 'Sirsi ', 'Yellapur'],
'Udupi': ['Udupi', 'Brahmavara', ' Karkal', 'Kundapura', 'Byndoor'],
'Tumakuru': ['Chiknayakanhalli', 'Gubbi', 'Koratagere', 'Kunigal ', 'Madhugiri', 'Pavagada', 'Sira', 'Tiptur', 'Tumakuru', 'Turuvekere'],
'Shivamogga': ['Bhadravati', 'Hosanagara', 'Sagar', 'Shikaripura', 'Shivamogga', 'Sorab', 'Thirthahalli'],
'Ramanagara ': ['Channapatna', 'Kanakapura', 'Ramanagara', 'Magadi'],
'Raichur': ['Devadurga', 'Lingsugur ', 'Manvi ', 'Raichur', 'Sindhnur'],
'Koppal': ['Gangawati', ' Koppal ', 'Kushtagi ', 'Yelbarga'],
'Mysuru': ['Heggadadevana kote', 'Hunsur', 'Krishnarajanagara', 'Mysuru', 'Nanjangud', 'Piriyapatna', 'T.Narsipur'],
'Mandya': ['Krishnarajpet ', 'Malavalli', 'Mandya', 'Nagamangala', 'Pandavapura', 'Shrirangapattana'],
'Kolar': ['Bangarapet', 'Kolar', 'Malur', ' Mulbagal', 'Srinivaspur'],
'Madikeri ': ['Madikeri', 'Somvarpet', 'Virajpet'],
'Haveri': ['Byadgi', 'Hangal', 'Haveri', 'Hirekerur', 'Ranibennur', 'Savanur', 'Shiggaon'],
'Kalaburagi': ['Afzalpur', 'Aland', 'Chincholi', 'Chitapur', 'Kalaburagi', 'Jevargi', 'Sedam'],
'Gadag': ['Gadag-Betigeri', 'Mundargi', 'Nargund', 'Ron', ' Shirhatti'],
'Belagavi': ['Athni', 'Bailahongal', 'Belagavi', 'Chikodi', 'Gokak ', 'Hukkeri', 'Khanapur', 'Kittur', 'Raybag', 'Ramdurg', 'Saundatti'],
'Bengaluru': ['Devanahalli', 'Doddaballapura', 'Hoskote', 'Nelamangala', 'Anekal ', 'Bengaluru North', ' Bengaluru East', ' Bengaluru South'],
'Bagalkot': ['Badami', ' Bagalkot ', 'Bilgi ', 'Hungund ', 'Jamkhandi', ' Mudhol'],
'Ballari': ['Ballari ', 'Hosapete', ' Kampli', 'Hoovina Hadagalli', 'Kudligi', ' Sanduru', ' Siruguppa'],
'Bidar': ['Bidar', ' Basavakalyan', 'Bhalki', ' Homnabad ', 'Aurad'],
'Vijayapura': ['Vijayapura', ' Indi ', 'Muddebihal ', 'Sindgi ', 'Basavana Bagevadi'],
'Chamarajanagar': ['Chamrajnagar', 'Gundlupet ', 'Kollegal', 'Yelandur'],
'Chikballapur': [' Bagepalli ', 'Chikballapur', 'Chintamani ', 'Gauribidanur', 'Gudibanda', 'Sidlaghatta'],
'Chikkamagaluru': ['Chikkamagaluru', ' Kadur ', 'Koppa', 'Mudigere ', 'Narasimharajapura', ' Sringeri', ' Tarikere'],
'Chitradurga': ['Challakere', ' Chitradurga', ' Hiriyur', ' Holalkere', ' Hosadurga ', 'Molakalmuru'],
'Mangaluru': ['Bantwal', ' Beltangadi', ' Mangaluru ', 'Puttur ', 'Sulya'],
'Davanagere': ['Channagiri ', 'Davanagere ', 'Harihar', ' Harpanahalli ', 'Honnali', ' Jagalur'],
'Dharwad': ['Dharwad', 'Hubballi', 'Kalghatgi', 'Kundgol', 'Navalgund']
};
$.each(districts, function (i) {
$('#dist').append('<option>' + districts[i] + '</option>');
});
$('#dist').on('click', 'option', function () {
$('#city').html('');
var showcity = cities[$(this).text()];
$.each(showcity, function (i) {
$('#city').append('<option>' + showcity[i] + '</option>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 style="margin-left: 20px">Choose District </h3>
<select id="dist" class="form-group form-control" required="required" name="distr">
<optgroup>
</optgroup>
</select>
</div>
<div class="col-md-6">
<h3 style="margin-left: 20px">Cities </h3>
<select id="city" class="form-group form-control" required="required" name="cities">
<optgroup label="Please Select a District First">
</optgroup>
</select>
</div>
</div>
</div>
我试图将此限制为前端，因此我避免使用ASP.NET DropDownlist。提前致谢
答案 0 :(得分：0)
您需要填充每个选项的value属性。然后在select元素上使用change事件，现在可以正确返回＆＃34; val＆＃34;。
$(document).ready(function () {
var districts = ['Choose District', 'Yadgir', 'Gadag', 'Kalaburagi', ' Karwar', 'Tumakuru', 'Shivamogga', 'Kolar', 'Ramanagara ', 'Mandya', 'Madikeri ', 'Haveri', 'Dharwad', 'Bengaluru', 'Bagalkot', 'Ballari', ' Karwar', 'Hassan', 'Bidar', 'Davanagere', 'Vijayapura', 'Mangaluru', 'Chamarajanagar', 'Chitradurga', 'Chikkamagaluru', 'Udupi', 'Koppal', 'Raichur', 'Ramanagara ', 'Mysuru', 'Shivamogga'];
var cities =
{
'Yadgir': ['Shahpur', 'Shorapur', 'Yadgir'],
'Hassan': ['HoleNarsipura', 'Arsikere', 'Channarayapattana', 'Belur', 'Arkalgud', 'Alur', 'Sakleshpur'],
' Karwar': ['Ankola', ' Bhatkal', ' Haliyal ', 'Honnavar ', 'Joida', ' Karwar', ' Kumta ', 'Mundgod', ' Siddapur', 'Sirsi ', 'Yellapur'],
'Udupi': ['Udupi', 'Brahmavara', ' Karkal', 'Kundapura', 'Byndoor'],
'Tumakuru': ['Chiknayakanhalli', 'Gubbi', 'Koratagere', 'Kunigal ', 'Madhugiri', 'Pavagada', 'Sira', 'Tiptur', 'Tumakuru', 'Turuvekere'],
'Shivamogga': ['Bhadravati', 'Hosanagara', 'Sagar', 'Shikaripura', 'Shivamogga', 'Sorab', 'Thirthahalli'],
'Ramanagara ': ['Channapatna', 'Kanakapura', 'Ramanagara', 'Magadi'],
'Raichur': ['Devadurga', 'Lingsugur ', 'Manvi ', 'Raichur', 'Sindhnur'],
'Koppal': ['Gangawati', ' Koppal ', 'Kushtagi ', 'Yelbarga'],
'Mysuru': ['Heggadadevana kote', 'Hunsur', 'Krishnarajanagara', 'Mysuru', 'Nanjangud', 'Piriyapatna', 'T.Narsipur'],
'Mandya': ['Krishnarajpet ', 'Malavalli', 'Mandya', 'Nagamangala', 'Pandavapura', 'Shrirangapattana'],
'Kolar': ['Bangarapet', 'Kolar', 'Malur', ' Mulbagal', 'Srinivaspur'],
'Madikeri ': ['Madikeri', 'Somvarpet', 'Virajpet'],
'Haveri': ['Byadgi', 'Hangal', 'Haveri', 'Hirekerur', 'Ranibennur', 'Savanur', 'Shiggaon'],
'Kalaburagi': ['Afzalpur', 'Aland', 'Chincholi', 'Chitapur', 'Kalaburagi', 'Jevargi', 'Sedam'],
'Gadag': ['Gadag-Betigeri', 'Mundargi', 'Nargund', 'Ron', ' Shirhatti'],
'Belagavi': ['Athni', 'Bailahongal', 'Belagavi', 'Chikodi', 'Gokak ', 'Hukkeri', 'Khanapur', 'Kittur', 'Raybag', 'Ramdurg', 'Saundatti'],
'Bengaluru': ['Devanahalli', 'Doddaballapura', 'Hoskote', 'Nelamangala', 'Anekal ', 'Bengaluru North', ' Bengaluru East', ' Bengaluru South'],
'Bagalkot': ['Badami', ' Bagalkot ', 'Bilgi ', 'Hungund ', 'Jamkhandi', ' Mudhol'],
'Ballari': ['Ballari ', 'Hosapete', ' Kampli', 'Hoovina Hadagalli', 'Kudligi', ' Sanduru', ' Siruguppa'],
'Bidar': ['Bidar', ' Basavakalyan', 'Bhalki', ' Homnabad ', 'Aurad'],
'Vijayapura': ['Vijayapura', ' Indi ', 'Muddebihal ', 'Sindgi ', 'Basavana Bagevadi'],
'Chamarajanagar': ['Chamrajnagar', 'Gundlupet ', 'Kollegal', 'Yelandur'],
'Chikballapur': [' Bagepalli ', 'Chikballapur', 'Chintamani ', 'Gauribidanur', 'Gudibanda', 'Sidlaghatta'],
'Chikkamagaluru': ['Chikkamagaluru', ' Kadur ', 'Koppa', 'Mudigere ', 'Narasimharajapura', ' Sringeri', ' Tarikere'],
'Chitradurga': ['Challakere', ' Chitradurga', ' Hiriyur', ' Holalkere', ' Hosadurga ', 'Molakalmuru'],
'Mangaluru': ['Bantwal', ' Beltangadi', ' Mangaluru ', 'Puttur ', 'Sulya'],
'Davanagere': ['Channagiri ', 'Davanagere ', 'Harihar', ' Harpanahalli ', 'Honnali', ' Jagalur'],
'Dharwad': ['Dharwad', 'Hubballi', 'Kalghatgi', 'Kundgol', 'Navalgund']
};
$.each(districts, function (i) {
$('#dist').append('<option value="' + districts[i] + '">' + districts[i] + '</option>');
});
$('#dist').on('change', function () {
$('#city').html('');
var showcity = cities[$(this).val()];
$.each(showcity, function (i) {
$('#city').append('<option>' + showcity[i] + '</option>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 style="margin-left: 20px">Choose District </h3>
<select id="dist" class="form-group form-control" required="required" name="distr">
<optgroup>
</optgroup>
</select>
</div>
<div class="col-md-6">
<h3 style="margin-left: 20px">Cities </h3>
<select id="city" class="form-group form-control" required="required" name="cities">
<optgroup label="Please Select a District First">
</optgroup>
</select>
</div>
</div>
</div>