javascript - 无法根据 Google Chrome 上第一个 中选择的值填充 选项

Question

问题是它在 Firefox 中工作得很好，但在 Google Chrome 中却不起作用。在 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。提前致谢

Answer 1

您需要填充每个选项的 value 属性。然后在选择元素上使用更改事件，现在可以正确返回“val”。

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