Show and hide div elements based on dropdown selection in html using javascript

Question

I have a question using javascript to show hide a div when using a dropdown. Code works for links and buttons but im asking if there's any way to rewrite it so it can use the SELECT option. Like if i select 'Show' from dropdown it will show me the div containing 'Hello world!'

My current Javascript:

<script>
function showMe(id) {
    var e = document.getElementById(id);
    if(e.style.display == "block") {
        e.style.display = "none";
    } else {
        e.style.display = "block";
    }
}
</script>

And the index.html contains:

<select>
    <option>Hide</option>
    <option onselect="showMe('idShowMe')">Show</option>
</select>

<div id="idShowMe" style="display: none">
    <b>Hello world!</b>
</div>

onselect is not implemented on option elements, you need to attach onchange to select element. — Teemu
– Teemu, Commented May 6, 2015 at 15:30

Silence Peace · Accepted Answer · 2015-05-06 15:35:39Z

9

You can change your code

function showMe(e) {
    var strdisplay = e.options[e.selectedIndex].value;
    var e = document.getElementById("idShowMe");
    if(strdisplay == "Hide") {
        e.style.display = "none";
    } else {
        e.style.display = "block";
    }
}

<select onchange="showMe(this);">
    <option>Hide</option>
    <option>Show</option>
</select>

<div id="idShowMe" style="display: none">
    <b>Hello world!</b>
</div>

answered May 6, 2015 at 15:35

Silence Peace

3394 silver badges13 bronze badges

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

1 Comment

User_T Over a year ago

Extra question - can i also modify the code in any way so i can use diff selections to show/hide diff divs? Like 1 selecting makes 1 div visible and choosing another one blocks the first one and makes the other visible?

The Guest · Accepted Answer · 2015-05-06 15:41:11Z

2

    <select onchange="showMe(this)">
    <option>Hide</option>
    <option >Show</option>
</select>

<div id="idShowMe" style="display: none">
    <b>Hello world!</b>
</div>



function showMe(selectedOption) {

    if(selectedOption.value=="Hide") {
        document.getElementById('idShowMe').style.display = 'none';
    } else {
        document.getElementById('idShowMe').style.display = 'block';
    }
}

answered May 6, 2015 at 15:41

The Guest

74211 silver badges28 bronze badges

Comments

Sunil B N · Accepted Answer · 2015-05-06 15:47:20Z

2

JS Fiddle for the same

<select id="mySelect" onchange="showMe('idShowMe')">
    <option>Hide</option>
    <option>Show</option>
</select>

<div id="idShowMe" style="display: none">
    <b>Hello world!</b>
</div>

<script>
function showMe(id) {
    var e = document.getElementById(id);
    if(e.style.display == "block") {
        e.style.display = "none";
    } else {
        e.style.display = "block";
    }
}
</script>

answered May 6, 2015 at 15:47

Sunil B N

4,2251 gold badge33 silver badges53 bronze badges

Comments

JavaScript.Place · Accepted Answer · 2015-05-06 15:51:45Z

This can be done with onchange event and then checking the selected option. http://jsfiddle.net/hanno_drefke/dwfr224q/

the Javascript code:

var current;
function showMe(element) {
  if(current!==undefined){
    document.getElementById(current).setAttribute('style','display:none');
  }
  var fetchMe = element.options[element.selectedIndex].getAttribute('data-show');
  if(fetchMe!==null){
    document.getElementById(fetchMe).setAttribute('style','display:block'); 
    current=fetchMe;
  }
}

and minimal change ot your HTML Code:

<select onchange="showMe(this)">
    <option>Hide</option>
    <option data-show="idShowMe">Show</option>
</select>

<div id="idShowMe" style="display: none">
    <b>Hello world!</b>
</div>

With this solution are free to connect any layer with the corresponding id to the option. Just insert the data-show value and create a div with the id: http://jsfiddle.net/hanno_drefke/dwfr224q/1/

Collectives™ on Stack Overflow

Show and hide div elements based on dropdown selection in html using javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related