Unable to populate a on Google Chrome

Question

Problem is It works perfectly fine in Firefox but not working in Google Chrome. In Google Chrome The second list is not populated like it does in firefox, am missing the obvious ? Please help me, below is my script

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

Am trying to limit this to Front End only hence am avoiding ASP.NET DropDownlist. Thanks in advance

Duplicate of http://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome — Parth Trivedi, Jan 20 '16 at 11:10
Possible duplicate of [jquery option select not working in chrome](http://stackoverflow.com/questions/15195227/jquery-option-select-not-working-in-chrome) — GreyRoofPigeon, Jan 20 '16 at 11:11
@ParthTrivedi i had alrdy checked those threads and various blogs, i even changed the "click" function to "change", no joy in chrome and it even stops working in firefox — santhoshkumar B, Jan 20 '16 at 11:17

dovidweisz · Accepted Answer · 2016-01-20T11:19:49.643

You need to populate the value property of each option. Then use the change event on the select element which will now be able to properly return a "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>

Unable to populate a option based on the value selected in first on Google Chrome

1 Answers1

Unable to populate a on Google Chrome