CODEWITHSUNDEEP
javascripthtml
Jelles
Jelles

Reputation: 25

Showing select options on different select options

I want when someone selects a country out of my list the province in that country show up in the second select bar is this possible within html? And if not how do I do it with javascript.

<!DOCTYPE html>
<html>
<head>
    <title>Gegevens</title>
</head>
<body>
    <center>
        <h1>Gegevens</h1>
    </center>
    Land:
            <select id="countries">
                <option value="Holland">Holland</option>
                <option value="Denmark">Denmark</option>
                <option value="England">England</option>
                <option value="Spain">Spain</option>
                <option value="Italy">Italy</option>
            </select><br>
    Provincie:
            <select> OPTIONS FOR HOLLAND
                <option value="Gelderland">Gelderland</option>
                <option value="Utrecht">Utrecht</option>
            </select>
            <select> OPTIONS FOR ENGLAND ETC...
                 <option value="Schotland">Schotland</option>
                 <option value="Wales">Wales</option>
            </select>
    <footer><a href="SE.html">Ga  terug</a></footer>
</body>
</html>

Upvotes: 1

Views: 75

Answers (3)

bezetde
bezetde

Reputation: 11

You need to use JS and play with elements display property.

After user selects a country hide province select (code snippet below hides all selects sharing toggle class), then identify which country was selected and show the province select for that country. Voilà!

<!DOCTYPE html>
<html>
<head>
    <title>Gegevens</title>
</head>
<body>
    <center>
        <h1>Gegevens</h1>
    </center>
    Land:
    <select id="countrySelect" onchange="toggleCountry()">
        <option value="Holland">Holland</option>
        <option value="England">England</option>
    </select><br>
    Provincie:
    <select id="provinceHolland" class="toggle">
        <option value="Gelderland">Gelderland</option>
        <option value="Utrecht">Utrecht</option>
    </select>
    <select id="provinceEngland" class="toggle" style="display:none">
         <option value="Schotland">Schotland</option>
         <option value="Wales">Wales</option>
    </select>
    <footer><a href="SE.html">Ga  terug</a></footer>
    <script>
    function toggleCountry() {
        var list = document.getElementsByClassName("toggle");
        for (var i = 0; i < list.length; i++) {
            list[i].style.display = "none";
        }
        var sub = "province" + document.getElementById("countrySelect").value;
        document.getElementById(sub).style.display = "inline";
    }
    </script>
</body>

Upvotes: 0

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

You'll probably have to do this using JavaScript. I've edited your HTML a bit to make the selection process easier. There might be a way with HTML form elements, but try this:

var countrySelect = document.getElementById('countries'); //the main select
var countryClass = document.getElementsByClassName('country'); //the other selects

countrySelect.onchange = function(){
    var selected = this.children[this.selectedIndex].value; //this is the value of the country select;
    for(var i = 0; i < countryClass.length; i++)
      countryClass[i].style.display = countryClass[i].id === selected ? 'block' : 'none';
}
<body>
    <center>
        <h1>Gegevens</h1>
    </center>
    Land:
            <select id="countries">
                <option disabled selected>Select Country</option>
                <option value="Holland">Holland</option>
                <option value="Denmark">Denmark</option>
                <option value="England">England</option>
                <option value="Spain">Spain</option>
                <option value="Italy">Italy</option>
            </select><br>
    Provincie:
            <select class="country" id="Holland" style="display:none;">
                <option disabled selected>Select Location</option>
                <option value="Gelderland">Gelderland</option>
                <option value="Utrecht">Utrecht</option>
            </select>
            <select class="country" id="England" style="display:none;">
                 <option disabled selected>Select Location</option>
                 <option value="Schotland">Schotland</option>
                 <option value="Wales">Wales</option>
            </select>
</body>

Upvotes: 2

JustLearning
JustLearning

Reputation: 3322

I am not sure about the html way but the jquery way is pretty easy.

Handle option selected of countries. Based on the country selected hide/show provinces:

$(document).ready(function(){
   $('#countries').on('change',function(){
      var selectedCountry = $(this).find('option:selected').text();

      switch (selectedCountry){
         case 'Holland':
           // hide show provice
           break;
         //etc

      }
    });
});

Upvotes: 0

Related Questions