CODEWITHSUNDEEP
javascriptlist
user2809091
user2809091

Reputation: 1

Nested Dropdown list not working

So i want to create a dropdown list "Continent" and depending on the selected continent, to show another dropdown list with the respective countries.

I was able to create the "Continent" dropdown list but when i click on the continent, it wont display the countries. Any ideas whats wrong in my code?

My HTML code is: 

<!DOCTYPE html>


<body>
    <select id="continents">
        <option value="dummy">Select</option>
        <option value="AF">Africa</option>
        <option value="AM">America</option>
        <option value="AS">Asia</option>
        <option value="OC">Oceania</option>
        <option value="EU">Europe</option>
    </select>

    <select id="countries" class="AF">
        <option>Select</option>
        <option>Algeria</option>
        <option>Angola</option>
        <option>Benin</option>
        <option>Botswana</option>
        <option>Burkina</option>
        <option>Burundi</option>
        <option>Cameroon</option>
        <option>Cape Verde</option>
        <option>Central African Republic</option>
        <option>Chad</option>
        <option>Comoros</option>
        <option>Congo</option>
        <option>Congo, Democratic Republic of</option>
        <option>Djibouti</option>
        <option>Egypt</option>
        <option>Equatorial Guinea</option>
        <option>Eritrea</option>
        <option>Ethiopia</option>
        <option>Gabon</option>
        <option>Gambia</option>
        <option>Ghana</option>
        <option>Guinea</option>
        <option>Guinea-Bissau</option>
        <option>Ivory Coast</option>
        <option>Kenya</option>
        <option>Lesotho</option>
        <option>Liberia</option>
        <option>Libya</option>
        <option>Madagascar</option>
        <option>Malawi</option>
        <option>Mali</option>
        <option>Mauritania</option>
        <option>Mauritius</option>
        <option>Morocco</option>
        <option>Mozambique</option>
        <option>Namibia</option>
        <option>Niger</option>
        <option>Nigeria</option>
        <option>Rwanda</option>
        <option>Sao Tome and Principe</option>
        <option>Senegal</option>
        <option>Seychelles</option>
        <option>Sierra Leone</option>
        <option>Somalia</option>
        <option>South Africa</option>
        <option>South Sudan</option>
        <option>Sudan</option>
        <option>Swaziland</option>
        <option>Tanzania</option>
        <option>Togo</option>
        <option>Tunisia</option>
        <option>Uganda</option>
        <option>Zambia</option>
        <option>Zimbabwe</option>
    </select>

    <select id="countries" class="AM">
        <option>Select</option>
        <option>Antigua and Barbuda</option>
        <option>Bahamas</option>
        <option>Argentina</option>
        <option>Barbados</option>
        <option>Belize</option>
        <option>Bolivia </option>
        <option>Brazil</option>
        <option>Canada</option>
        <option>Cayman Islands</option>
        <option>Chile</option>
        <option>Chile</option>
        <option>Colombia</option>
        <option>CubaCosta Rica</option>
        <option>Dominica</option>
        <option>Dominican Republic</option>
        <option>Ecuador</option>
        <option>El Salvador</option>
        <option>French Guyana</option>
        <option>Greenland</option>
        <option>Grenada</option>
        <option>Guatemala</option>
        <option>Guyana</option>
        <option>Haiti</option>
        <option>Honduras</option>
        <option>Jamaica</option>
        <option>Mexico</option>
        <option>Nicaragua</option> 
        <option>Panama</option> 
        <option>Paraguay</option> 
        <option>Peru</option> 
        <option>Puerto Rico</option> 
        <option>Saint Kitts and Nevis</option>
        <option>Saint Lucia</option> 
        <option>Saint Vincent and the Grenadines</option> 
        <option>Suriname</option> 
        <option>Trinidad and Tobago</option>
        <option>Turks and Caicos</option> 
        <option>United States</option>
        <option>Uruguay</option> 
        <option>Venezuela</option> 
    </select>

    <select id="countries" class="AS">
        <option>Select</option>
        <option>Afghanistan</option> 
        <option>Bahrain</option>
        <option>Bangladesh</option>
        <option>Bhutan</option>
        <option>Brunei</option>
        <option>Cambodia</option>
        <option>China</option>
        <option>East Timor</option>
        <option>India</option>
        <option>Indonesia</option>
        <option>Iran</option>
        <option>Iraq</option>
        <option>Israel</option>
        <option>Japan</option>
        <option>Jordan</option>
        <option>Kazakhstan</option>
        <option>Korea North</option>
        <option>Korea South</option>
        <option>Kuwait</option>
        <option>Kyrgyzstan</option>
        <option>Laos</option>
        <option>Lebanon</option>
        <option>Malaysia</option>
        <option>Maldives</option>
        <option>Mongolia</option>
        <option>Myanmar (Burma)</option>
        <option>Nepal</option>
        <option>Oman</option>
        <option>Pakistan</option>
        <option>The Philippines</option>
        <option>Qatar</option>
        <option>Russia</option>
        <option>Saudi Arabia</option>
        <option>Singapore</option>
        <option>Sri Lanka</option>
        <option>Syria</option>
        <option>Taiwan</option>
        <option>Tajikistan</option>
        <option>Thailand</option>
        <option>Turkey</option>
        <option>Turkmenistan</option>
        <option>United Arab Emirates</option>
        <option>Uzbekistan</option>
        <option>Vietnam</option>
        <option>Yemen</option>
    </select>

    <select id="countries" class="OC">
        <option>Australia</option>
        <option>Fiji</option>
        <option>Kiribati</option>
        <option>Marshall Islands</option>
        <option>Micronesia</option>
        <option>Nauru</option>
        <option>New Zealand</option>
        <option>Palau</option>
        <option>Papua New Guinea</option>
        <option>Samoa</option>
        <option>Solomon Islands</option>
        <option>Tonga</option>
        <option>Tuvalu</option>
        <option>Vanuatu</option>
    </select>

    <select id="countries" class="EU">
        <option>Albania</option>
        <option>Andorra</option>
        <option>Armenia</option>
        <option>Austria</option>
        <option>Azerbaijan</option>
        <option>Belarus</option>
        <option>Belgium</option>
        <option>Bosnia & Herzegovina</option>
        <option>Bulgaria</option>
        <option>Croatia</option>
        <option>Cyprus</option>
        <option>Czech Republic</option>
        <option>Denmark</option>
        <option>Estonia</option>
        <option>Finland</option>
        <option>France</option>
        <option>Georgia</option>
        <option>Germany</option>
        <option>Greece</option>
        <option>Hungary</option>
        <option>Iceland</option>
        <option>Ireland</option>
        <option>Italy</option>
        <option>Kosovo</option>
        <option>Latvia</option>
        <option>Liechtenstein</option>
        <option>Lithuania</option>
        <option>Luxembourg</option>
        <option>Macedonia</option>
        <option>Malta</option>
        <option>Moldova</option>
        <option>Monaco</option>
        <option>Montenegro</option>
        <option>The Netherlands</option>
        <option>Norway</option>
        <option>Poland</option>
        <option>Portugal</option>
        <option>Romania</option>
        <option>Russia</option>
        <option>San Marino</option>
        <option>Serbia</option>
        <option>Slovakia</option>
        <option>Slovenia</option>
        <option>Spain</option>
        <option>Sweden</option>
        <option>Switzerland</option>
        <option>Turkey</option>
        <option>Ukraine</option>
        <option>United Kingdom</option>
        <option>Vatican City (Holy See)</option>
    </select>
</body>

And my JavaScript code is

<script language="javascript">
$("#continents").change(function(){
   var value = $(this).val();
     $("#countries").css('display','none'); 
    $("."+value).css('display','block'); 

});

});

Upvotes: 0

Views: 388

Answers (1)

PSL
PSL

Reputation: 123739

Keep a moral handy Never duplicate ids, change them to classes and see it working, Also you can rewrite it as.

$("#continents").change(function(){
     $(".countries").not($("."+this.value).show()).hide(); 
});

Fiddle

If you duplicate ids and use id selector with vanilla JS or jquery or anything else it will select only the first element that appears with that ID in DOM. But you can work around with attribute selector to select id. i.e $("[id='countries']").css('display','none'), but dont use it.

Upvotes: 1

Related Questions