Dropdown issue in HTML using Javascript

Question

I have my below code which on selecting one drop down-value, displays the corresponding drop downs and soon. But I am getting some error for the below code.

Here I want to display only the continent name on selection of the continent values in the first drop down. Upon selection it should show the second drop down with the values for continent names and on selection of the country value in the first drop down it should display the values for country in the second drop down and on selection of the values in second drop down it should display a third one and then on-selection of third drop down, then it should show a table with some values.

But in my case, I am unable to see the correct values for the second and third drop downs drop down on-selection of the first drop down value options.

For eg: If I select the value continent in first drop down it should open a second drop down with values of continent alone and not countries. Once I select Africa in first drop down then only cities of Africa (Johnesberg and Capetown) should be displayed for Africa option and not for Australia option.

Note: The below is the problematic code I am getting. You can get a preview of my problem by copying in a test.txt and saving as test.html format and opening in Firefox or IE.

 <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript"> 
    function onSelectContinent(a)
        {
            a = document.getElementById(a.value);
            if(a != "Select")
            {
                document.getElementById("module").hidden=false;
            }
            else
            {
                document.getElementById("module").hidden=true;
            }
            
        }
        
        function onSelectCountry(a)
        {
            a = document.getElementById(a.value);
            if(a != "Select")
            {
                document.getElementById("count").hidden=false;
            }
            else
            {
                document.getElementById("count").hidden=true;
            }
            
        }
    
        function onSelectApp(a)
        {
            a = document.getElementById(a.value);
            if(a != "Select")
            {
                document.getElementById("apptable").hidden=false;
            }
            else
            {
                document.getElementById("count").hidden=true;
            }
            
        }
     </script>
    
          <html>
          <body>
            <h2>Check Repository Status</h2>
            <p> </p>
            &nbsp; <h3>&nbsp; Select Main Menu</h3>&nbsp;&nbsp;<br/>
            <select name="docbase" id ="docbase" onchange="onSelectContinent(this);">
            <option value="Select">Continent</option>
            <option value="World">World</option>
            <option value="Countries">Countries</option> 
            <option value="States">States</option>
            <option value="Cities">Cities</option>
            <option value="District">District</option>
            </select>
            
            <select name="modules" id ="module" hidden = "true" onchange="onSelectCountry(this);">
            <option value="index">Asia</option>
            <option value="bocs">Australia</option>
             <option value="bocs">Africa</option>
              <option value="bocs">America</option>
               <option value="bocs">Europe</option>
            </select>
            <select name="modules" id ="module1" hidden = "true" onchange="onSelectModule1(this);">
            <option value="Select">Australia</option>
            <option value="App">India</option>
            <option value="docbase">USA</option>
            <option value="index">England</option>
            <option value="bocs">Newzealand</option>
            <option value="index">SouthAfrica</option>
          
            </select>
            <select name="Applications" id ="count" hidden = "true" onchange="onSelectApp(this);">
            <option value="Select">Select</option>
            <option value="App">Capetown</option>
            <option value="docbase">Johnesberg</option> 
            </select>
            <br/><br/>
            <table border="1" width="200" id="apptable" hidden="true">
            <tr>
              <td><b>Population</b></td>
              <td><b>Area</b></td>
            </tr>
            <tr>
            <td>20millions</td><td>10000sq-miles</td>
            </tr>
            </table>
          </body>
          </html>

works fine for me jsfiddle.net/4pDQB/1 . One suggestion though: you need to fix the check for "Select". See my jsfiddle for content selection. — gp.
– gp., Commented Jul 9, 2014 at 10:24
@gp in your feedle also I am seeing the same issue. When you select countries it is still showing the option for continents. It should display countries like India,UK,Japan etc. — ScriptLearner
– ScriptLearner, Commented Jul 9, 2014 at 10:26

Barmar · Accepted Answer · 2014-07-09 10:26:50Z

1

This line:

a = document.getElementById(a.value);

should be:

a = a.value;

DEMO

answered Jul 9, 2014 at 10:26

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dropdown issue in HTML using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related