使用javascript根据html中的下拉选择显示和隐藏div元素

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>

Answer 1

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> 

Answer 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';
    }
}

Answer 3

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/

Answer 4

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>