# Use of select list to control visibility of div

**URL:** <https://forum.kirupa.com/t/use-of-select-list-to-control-visibility-of-div/245124>\
**Category:** web dev\
**Created:** [November 26, 2007, 6:13pm UTC](https://forum.kirupa.com/t/use-of-select-list-to-control-visibility-of-div/245124 "2007-11-26T18:13:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![silverType](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@silverType](https://forum.kirupa.com/u/silverType)\
**Post date:** [November 26, 2007, 6:13pm UTC](https://forum.kirupa.com/t/use-of-select-list-to-control-visibility-of-div/245124/1 "2007-11-26T18:13:34Z")

</div>

Hi,

I have 2 div layers 1 called divStringTest while the other called divNumericTest. The display of these 2 div layers are controlled by a select list called lstDataType. lstDataType contains the following options: string, integer, float and date. Whenever, string is selected, I want to set the display of the divNumericTest to none. Likewise, if the other data type other than string is selected, the display attribute of the divStringTest will be set to none. The following is my code:

```auto

function detectDataType()
	{
		var datatype = document.getElementById("lstDataType").options.value;
	
		if ( datatype == 'String' )
		{
			alert(datatype);
			document.getElementById('divStringTest').style.display = "block";
			document.getElementById('divNumericTest').style.display = "none";  
		}
		else
		{
			document.getElementById('divNumericTest').style.display = "block"; 
			document.getElementById('divStringTest').style.display = "none";
		}
			
	}

<!-- html -->
<select name="lstDataType" id="lstDataType" style="width:100px" onchange="detectDataType()">
                <option value="string" selected="selected">String</option>
                <option value="integer">Integer</option>
                <option value="float">Float</option>
                <option value="date">Date</option>                            
</select>

```

Somehow whenever I select an option, it works for the 1st time but fails subsequently. Any idea why is that so? Thanks in advance.