Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
hide / display select box
- Thread starter nrastogi
- Start date
Code:
<head>
<script language="javascript">
function showHide(selList){
if(selList.value == "show"){
document.myForm.list2.style.display = "block";
}
else{
document.myForm.list2.style.display = "none";
}
}
</script>
</head>
<body>
<form name="myForm">
<select name="list1" onchange="javascript:showHide(this)">
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
<br>
<select name="list2">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
</form>
</body>
BillyRayPreachersSon
Programmer
NR,
This code will do the job:
Hope this helps!
Dan
This code will do the job:
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showHideOtherList()
{
var formObj = document.forms['myForm'];
formObj.otherList.style.display = formObj.showHideList[formObj.showHideList.selectedIndex].value;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<SELECT NAME="showHideList" onChange="showHideOtherList();">
<OPTION VALUE="block">Show other list</OPTION>
<OPTION VALUE="none">Hide other list</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="otherList">
<OPTION>Option 1</OPTION>
<OPTION>Option 2</OPTION>
<OPTION>Option 3</OPTION>
</SELECT>
<BR><BR>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lectus. Ut condimentum. Maecenas non wisi et justo adipiscing porttitor.
</FORM>
</BODY>
</HTML>Hope this helps!
Dan
- Thread starter
- #4
Thanks so much guys... I tried LV's code and it worked like a charm..
I have a label and the select box next to the label. When I run the code, it moves the select box show up just below the label, instead next to the label.
Any ideas??
Also, Is there a way to hide & display the label as well.
Thanks so much,
NR
I have a label and the select box next to the label. When I run the code, it moves the select box show up just below the label, instead next to the label.
Any ideas??
Also, Is there a way to hide & display the label as well.
Thanks so much,
NR
BillyRayPreachersSon
Programmer
NR,
This will also show/hide the label:
Hope this helps!
Dan
Hope this helps!
Dan
This will also show/hide the label:
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showHideOtherList()
{
var formObj = document.forms['myForm'];
document.getElementById('showHideDIV').style.display = formObj.showHideList[formObj.showHideList.selectedIndex].value;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
List Box 1: <SELECT NAME="showHideList" onChange="showHideOtherList();">
<OPTION VALUE="block">Show other list</OPTION>
<OPTION VALUE="none">Hide other list</OPTION>
</SELECT>
<BR><BR>
<DIV ID="showHideDIV">
List Box 2: <SELECT NAME="otherList">
<OPTION>Option 1</OPTION>
<OPTION>Option 2</OPTION>
<OPTION>Option 3</OPTION>
</SELECT>
</DIV>
<BR><BR>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec lectus. Ut condimentum. Maecenas non wisi et justo adipiscing porttitor.
</FORM>
</BODY>
</HTML>Hope this helps!
Dan
Hope this helps!
Dan
- Thread starter
- #7
Hi LV,
Here is the code...
I would like to display enduser select only if the value of report type is 2.
function dispenduser() {
if (document.chsreport.reportty.value == 2) {
document.chsreport.enduser.style.display = "block";
}
else {
document.chsreport.enduser.style.display = "none";
}
}
<tr>
<td span class="bold_bodytext">Type of Report</td>
<td>
<select name="reportty" size="1" onChange="dispenduser();">
<option value="0">Select a Report </option>
<option value="1">Reseller Sales by Vendor </option>
<option value="2">Reseller Sales by End User</option>
<option value="3">Vendor Sales by Product </option>
</select>
</td>
</tr>
<tr>
<td align="left" bgcolor="#C0C0C0" span class="bold_bodytext"> End User
<select name="enduser" size="1" >
<option value="0">Select this option </option>
<option value="abc"> ABC </option>
<option value="xyz"> XYZ </option>
</select>
</td>
</tr>
Here is the code...
I would like to display enduser select only if the value of report type is 2.
function dispenduser() {
if (document.chsreport.reportty.value == 2) {
document.chsreport.enduser.style.display = "block";
}
else {
document.chsreport.enduser.style.display = "none";
}
}
<tr>
<td span class="bold_bodytext">Type of Report</td>
<td>
<select name="reportty" size="1" onChange="dispenduser();">
<option value="0">Select a Report </option>
<option value="1">Reseller Sales by Vendor </option>
<option value="2">Reseller Sales by End User</option>
<option value="3">Vendor Sales by Product </option>
</select>
</td>
</tr>
<tr>
<td align="left" bgcolor="#C0C0C0" span class="bold_bodytext"> End User
<select name="enduser" size="1" >
<option value="0">Select this option </option>
<option value="abc"> ABC </option>
<option value="xyz"> XYZ </option>
</select>
</td>
</tr>
- Thread starter
- #8
Hi Billy,
I ran your code. Ideally, This is exactly what I want. But, I can not use this technique as I can not hard code the values of the select to block or none. I want something happen conditionally.
Please let me know if you could provide me the solution by looking at my code.
Thanks so much again.
BTW: I figured out why the select was displaying in the next row. There was a </TD> & <TD> tag missing for label and enduser select box.
Now, the only issue is how to hide the label if I use LV's solution or yours "modified" soultion..
NR
I ran your code. Ideally, This is exactly what I want. But, I can not use this technique as I can not hard code the values of the select to block or none. I want something happen conditionally.
Please let me know if you could provide me the solution by looking at my code.
Thanks so much again.
BTW: I figured out why the select was displaying in the next row. There was a </TD> & <TD> tag missing for label and enduser select box.
Now, the only issue is how to hide the label if I use LV's solution or yours "modified" soultion..
NR
BillyRayPreachersSon
Programmer
NR,
Try this code - a modified version of yours:
Hope this helps!
Dan
Hope this helps!
Dan
Try this code - a modified version of yours:
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function dispenduser()
{
var formObj = document.forms['chsreport'];
if (formObj.reportty[formObj.reportty.selectedIndex].value == 2)
document.getElementById('showHideRow').style.display = 'block';
else
document.getElementById('showHideRow').style.display = 'none';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="chsreport">
<table>
<tr>
<td class="bold_bodytext">Type of Report</td>
<td>
<select name="reportty" size="1" onChange="dispenduser();">
<option value="0">Select a Report</option>
<option value="1">Reseller Sales by Vendor</option>
<option value="2">Reseller Sales by End User</option>
<option value="3">Vendor Sales by Product</option>
</select>
</td>
</tr>
<tr id="showHideRow">
<td align="left" bgcolor="#C0C0C0" class="bold_bodytext">End User</td>
<td>
<select name="enduser" size="1" >
<option value="0">Select this option</option>
<option value="abc">ABC</option>
<option value="xyz">XYZ</option>
</select>
</td>
</tr>
</table>
</FORM>
</BODY>
</HTML>Hope this helps!
Dan
Hope this helps!
Dan
BillyRayPreachersSon
Programmer
Sorry - I forgot to mention...
Basically, the code hides or shows the whole second row.
Dan
Hope this helps!
Dan
- Thread starter
- #11
- Thread starter
- #12
BillyRayPreachersSon
Programmer
I'm not sure as to how far back this will be compatible. I can only suggest you try it and find out, as I don't have access to all browsers.
Dan
- Status
Similar threads
- Locked
- Question