Switch Show/Hide from Selectbox?!?!

JavaScript
1

I’m trying to figure out how to make a select box change which <div> should show or hide…

<script language="JavaScript">
	
	function doHideShowMatchplayOptions(divName){    
		var objDiv = document.getElementById(divName);    
		if(objDiv.style.display == ''){        
			objDiv.style.display = 'none    
		} else {        
			objDiv.style.display = '    
		} 
	}
	
</script>

<select name="matchplaytype" onchange="doHideShowMatchplayOptions(\\'idHideShowMatchplayOptions\\');">
    <option value="">Choose</option>
    <option value="1"># 1</option>
    <option value="2"># 2</option>
</select>

<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 1</td></tr></table>
</div>

<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 2</td></tr></table>
</div>

In the above script I’m only able to change one div… What I want is to be able to, if a user changes the selectbox from “# 1” to “# 2”, to change the viewable div… Hope this makes sense and somebody can help…

THanks in advance :slight_smile:

2

The major error here is that the ID attribute is unique. So you have to change them so they are different. You’re also going about this the wrong way. I’d do this:


document.getElementsByName('matchplaytype')[0].onchange = toggleOptions;
function toggleOptions() {
  if (this.value == '0') return false;
  var objdiv = document.getElementById('options' + this.value);
  objdiv.style.display = obj.style.display = 'none' ? '' : 'none';
}

<select name="matchplaytype">
    <option value="0">Choose</option>
    <option value="1"># 1</option>
    <option value="2"># 2</option>
</select>
<div id="options1"><p>This is #1</p></div>
<div id="options2"><p>This is #1</p></div>

The javascript would need to run after the HTML has loaded. This can be achieved by putting the JS just before the closing </body> tag.

Note the following:

  • No need for the onchange inline event handler in <select> (it’s a dirty way of doing things)
  • Your id names are horrible. Far too long and unreadable. Keep it simple, you’re less likely to make silly mistakes that way
  • Don’t use the language attribute in <script>. Use type=“text/javascript”
  • Don’t use <table> to lay this out. That is an extremely outdated method, unless of course you’re actually going to have a proper table with tabular data in there. :slight_smile:
3

I tryied it your way, but nothing seems to happen? The options1 and 2 div a both viewable from the start, and should not be, and if I change the select box nothing happens??? Any idea?

4

I was assuming you’d be able to control the CSS by yourself. Also a slight change to the JS:

div {display:none}

document.getElementsByName('matchplaytype')[0].onchange = toggleOptions;
function toggleOptions() {
  if (this.value == '0') return false;
  var objdiv = document.getElementById('options' + this.value);
  objdiv.style.display = obj.style.display = 'block' ? '' : 'block';
}
5

I have tryid that, but that didn’t help either… This is what I have now…

<style>
div {display:none}
</style>

<select name="matchplaytype">
    <option value="0">Choose</option>
    <option value="1"># 1</option>
    <option value="2"># 2</option>
</select>

<div id="options1"><p>This is #1</p></div>
<div id="options2"><p>This is #2</p></div>

<!-- <div id="options1" style="display:none;"><p>This is #1</p></div>
<div id="options2" style="display:none;"><p>This is #2</p></div> -->

<script language="javascript" type="text/javascript">
	document.getElementsByName('matchplaytype')[0].onchange = toggleOptions;
	function toggleOptions() {
	  if (this.value == '0') return false;
	  var objdiv = document.getElementById('options' + this.value);
	  objdiv.style.display = obj.style.display = 'block' ? '' : 'block';
	}
</script>

Still doesnt work… Hmmm??? Any ideas?

6

Should have tested this and thought a bit more about it. Try this:

    document.getElementsByName('matchplaytype')[0].onchange = toggleOptions;
    function toggleOptions() {
      if (this.value === '0') return false;
      var divs = document.getElementById('options').getElementsByTagName('div');
      for (var i = 0, j = divs.length; i < j; i++) {
        if (divs[i].className === 'options' + this.value) divs[i].style.display = 'block';
        else divs[i].style.display = '';
    }
    }

<select name="matchplaytype">
    <option value="0">Choose</option>
    <option value="1"># 1</option>
    <option value="2"># 2</option>
</select>

<div id="options">
  <div class="options1"><p>This is #1</p></div>
  <div class="options2"><p>This is #2</p></div>
</div>

The CSS needs to be changed to #options div {display:none}.

And you are still using the language attribute. It is deprecated, stop using it.

7

Ahhh…Thanks… Did the job :wink: U The Man