I'm new to HTML and javascript and I have a problem with a code sample. Basically the code is intended to use with checkboxes but I want it to be used with a certain dropdownmenu aka select option.

<input id="more" type="checkbox">Add More Users</input>
<div id="yourDiv"> ...other form... </div>

<script>
window.onload = function () {
    document.getElementById('more').onclick = function () {
        if (this.checked)
            document.getElementById('yourDiv').style.display = 'block';
        else
            document.getElementById('yourDiv').style.display = 'none';  
    }
}
</script>

What I want it to do is check the menubar onchange and show a new menubar depending on what selection the user picks. So for example option 1 would open menubar1 and so on.

So far I worked out the code below, I do not know if it's even close to a solution though.

So this code below is what triggers the script

<select id="Ärende" name="Ärende" required onchange=FuncÄrende()>
          <option id="BeställningY" value="Beställning">Beställning</option>
          <option id="AnmälanY" value="Anmälan">Anmälan</option>
          <option id="BehörighetY" value="Behörighet">Behörighet</option>
          <option id="MiljörondY" value="Miljörond">Miljörond</option>
          <option id="AnnatY" value="Annat">Annat</option>
        </select>

This code below is the script which will "unlock/show" the different divs I have all the other menubars in. This code is for the BeställningDiv. The rest of them looks the same with some differences ofc, so I only include one of em.

    <script>
            function FuncÄrende() {
              var Ärende = document.getElementById("Ärende");
              var ÄrendeValue = Ärende.options[Ärende.selectedIndex].value;

              if      (document.getElementById('BeställningY').value == "Beställning") {
                document.getElementById("BeställningDiv").style.display == "block";
                document.getElementById("AnmälanDiv").style.display == "none";
                document.getElementById("BehörighetDiv").style.display == "none";
                document.getElementById("MiljörondDiv").style.display == "none";
                document.getElementById("AnnatDiv").style.display == "none";
}
        }
      </script>

And finally this code below is one example of the different divs that the script will unlock.

<div id="BeställningDiv" style="display:none;">
    <h4 id="BeställningT">Beställning</h4>
        <select id="Beställning" name="Beställning">
          <option value="IT-Utrustning">IT-Utrustning</option>
          <option value="Kontors materiell">Kontors materiell</option>
          <option value="Belysning">Belysning</option>
          <option value="Ergonomi">Ergonomi</option>
        </select>
</div>

And please supply me with easy to understand solutions as I'm very new to HTML. I spent about 9 hours in my whole life with HTML and this is how far Ive e. Thanks in advance - Kind regards, Oliver

I'm new to HTML and javascript and I have a problem with a code sample. Basically the code is intended to use with checkboxes but I want it to be used with a certain dropdownmenu aka select option.

<input id="more" type="checkbox">Add More Users</input>
<div id="yourDiv"> ...other form... </div>

<script>
window.onload = function () {
    document.getElementById('more').onclick = function () {
        if (this.checked)
            document.getElementById('yourDiv').style.display = 'block';
        else
            document.getElementById('yourDiv').style.display = 'none';  
    }
}
</script>

What I want it to do is check the menubar onchange and show a new menubar depending on what selection the user picks. So for example option 1 would open menubar1 and so on.

So far I worked out the code below, I do not know if it's even close to a solution though.

So this code below is what triggers the script

<select id="Ärende" name="Ärende" required onchange=FuncÄrende()>
          <option id="BeställningY" value="Beställning">Beställning</option>
          <option id="AnmälanY" value="Anmälan">Anmälan</option>
          <option id="BehörighetY" value="Behörighet">Behörighet</option>
          <option id="MiljörondY" value="Miljörond">Miljörond</option>
          <option id="AnnatY" value="Annat">Annat</option>
        </select>

This code below is the script which will "unlock/show" the different divs I have all the other menubars in. This code is for the BeställningDiv. The rest of them looks the same with some differences ofc, so I only include one of em.

    <script>
            function FuncÄrende() {
              var Ärende = document.getElementById("Ärende");
              var ÄrendeValue = Ärende.options[Ärende.selectedIndex].value;

              if      (document.getElementById('BeställningY').value == "Beställning") {
                document.getElementById("BeställningDiv").style.display == "block";
                document.getElementById("AnmälanDiv").style.display == "none";
                document.getElementById("BehörighetDiv").style.display == "none";
                document.getElementById("MiljörondDiv").style.display == "none";
                document.getElementById("AnnatDiv").style.display == "none";
}
        }
      </script>

And finally this code below is one example of the different divs that the script will unlock.

<div id="BeställningDiv" style="display:none;">
    <h4 id="BeställningT">Beställning</h4>
        <select id="Beställning" name="Beställning">
          <option value="IT-Utrustning">IT-Utrustning</option>
          <option value="Kontors materiell">Kontors materiell</option>
          <option value="Belysning">Belysning</option>
          <option value="Ergonomi">Ergonomi</option>
        </select>
</div>

And please supply me with easy to understand solutions as I'm very new to HTML. I spent about 9 hours in my whole life with HTML and this is how far Ive e. Thanks in advance - Kind regards, Oliver

• javascript
• html

Share Improve this question Follow edited Oct 11, 2017 at 13:27 Liam 29.8k2828 gold badges139139 silver badges203203 bronze badges asked Oct 11, 2017 at 6:36 XetraXetra 7311 silver badge88 bronze badges 3

• 1 I think you skip {} – kyun Commented Oct 11, 2017 at 6:38
• Can you add full example. – swaroop pallapothu Commented Oct 11, 2017 at 6:39
• Where is document.getElementById("srt")? – kyun Commented Oct 11, 2017 at 6:39

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

If you tackle your problem from a different, it is actually not too plicated: you simply want to toggle the appearance of other elements based on the value of the select element.

• Therefore, the ground state of other elements should be hidden, and you always reset to ground state when the select option is updated.

• Now that is established, you need to know that JS is not reactive: in order to listen to changes to the <select> elements value, you will have to bind event listeners to your Arende select. This can be done by using .addEventListener() method.

• Use switch statements instead of deeply nested if/else statements. Imagine if you have 25 different options, that means your if/else tree will be nested 25 levels deep!

Here is an example code that you can work with. It is definitely far from optimal, because there are several things that you can change to improve performance (see notes at the end):

var Arende = document.getElementById("Arende");
var Rubrik2 = document.getElementById("srt");
var Bestallning = document.getElementById("Bestallning");
var Anmalan = document.getElementById("Anmalan");

// Listen to changes in <select>
Arende.addEventListener('change', function() {

  // Get the value of selected <option>
  var value = this.options[this.selectedIndex].value;

  // Hide all other elements
  // I reemnd that you give these elements a class instead!
  Rubrik2.style.display = 'none';
  Bestallning.style.display = 'none';
  Anmalan.style.display = 'none';

  // Now we use switch statements to go through all the options
  switch(value) {

    case 'Bestallning':
      Bestallning.style.display = 'block';
      break;

    case 'Anmalan':
      Anmalan.style.display = 'block';
      break;

    // And etc...

  }

});

Notes for code optimization and improvement

1. You should assign a class to all the "other elements" whose appearance are dependent on the value of your <select> element. This makes it very easy to apply a blanket style.display = 'none' statement to all of them, instead of having to enumerate through all your elements manually
2. Attach <option> to target element mapping information in the <option> itself, such as via HTML5 data- attribute. This makes it a lot easier and we do not even need to use switch/case statements at all. In the example below I have assumed that the value of the <option> directly corresponds to the ID of the element you want to show.

Here is a more proof-of-concept code:

var Arende = document.getElementById("Arende");
var Bestallning = document.getElementById("Bestallning");
var Anmalan = document.getElementById("Anmalan");

// Listen to changes in <select>
Arende.addEventListener('change', function() {

  // Get the value of selected <option>
  var value = this.options[this.selectedIndex].value;

  // Hide all other elements, but show the one whose ID matches option value
  var otherElements = document.querySelectorAll('.otherElements');
  for (var i = 0; i < otherElements.length; i++) {
    var el = otherElements[i];
    
    if (el.id === value)
      el.style.display = 'block';
    else
      el.style.display = 'none';
  }
});

.hidden {
  display: none;
}

<h4>Arende</h4>
<select id="Arende" name="Arende" required>
    <option value="Bestallning">Bestallning</option>
    <option value="Anmalan">Anmalan</option>
</select>

<!-- Other elements -->
<div id="Bestallning" class="otherElements hidden">Bestallning</div>
<div id="Anmalan" class="otherElements hidden">Anmalan</div>

var Arende = document.getElementById("Arende");
var ArendeValue = Arende.options[Arende.selectedIndex].value;

This is the correct way of getting the value. What you are doing will get you the element which is useful for the answer I provided.

Also, I would suggest you to learn the Chrome DevTools, it is perfect to debug things quickly.

    function run() {
var Arende = document.getElementById("Arende");
var Rubrik2 = document.getElementById("srt");
var Bestallning = document.getElementById("Bestallning");
var Anmalan = document.getElementById("Anmalan");
if (Arende == "Bestallning") {
  Rubrik2.text == "Behorighet";
  Bestallning.style.display = "block";
}
  else if
    (Arende == "Anmalan") {
      Rubrik2.text == "Anmalan";
      Anmalan.style.display = "block";
 }
      else{
        rubrik2.style.display = "none";
        Anmalan.style.display = "none";
        Bestallning.style.display = "none";

    }

}

You forgot the {} after the last else, also next to the function run() you need to open { and add all the code inside of it then close it }

It is just that you have syntax errors and unfortunately it is just about {} Add them after the else and close it at the end. Also add it after function run() and close it at the end as rightly mentioned by Peter.

Else you are doing good as a beginner but make sure never to mess-up the syntax.

You have lots of braces mistakes please pare with below code:

function run() { // braces for function
  var Arende = document.getElementById("Arende").value; // notice .value
  var Rubrik2 = document.getElementById("srt").value;
  var Bestallning = document.getElementById("Bestallning").value;
  var Anmalan = document.getElementById("Anmalan").value;
  if (Arende == "Bestallning") {
    Rubrik2.text = "Behorighet"; // single =
    Bestallning.style.display = "block";
  } // need to be closed here and same for other
  else if (Arende == "Anmalan") {
    Rubrik2.text = "Anmalan"; // single =
    Anmalan.style.display = "block";
  }
  else {
    rubrik2.style.display = "none";
    Anmalan.style.display = "none";
    Bestallning.style.display = "none";
  }
}

Below you'll find a sample solution.

Take a close look to how I'm using class names as part of my solution.

Basically, when option changes, grab the value, which is the class name of the menu I want to show. Hide and show using css.

Let me know if anything isn't clear

$(document).ready(function() {
  $(".options").on("change", function() {
    let val = $(this).val();
    $(".menu").removeClass("menu--active");
    $(`.${val}`).addClass("menu--active");
  });
});

.menus {
}

.menu {
  display: none;
}

.menu--active {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="options">
  <option value="menu--first">Pick first Menu</option>
  <option value="menu--second">Pick second Menu</option>
</select>

<div class="menus">
  <div class="menus__menu menu menu--first menu--active">This contains the first menu</div>
  <div class="menus__menu menu menu--second">This contains the second menu</div>

</div>

Thanks for all the help, the final solution I decided to use was the following

<script>
        $("#Kablarsladdarladdare").change(function(){
          if($(this).val() == "Sladd"){
            $("#SladdDetaljDiv").show();
            $("#SladdDetalj").prop("disabled", false);
          }else{
            $("#SladdDetaljDiv").hide();
            $("#SladdDetalj").prop("disabled", true);
          }
        });
      </script>

This is repeating on each "select" to determine which new selection should be visible.