Hide/Show Select [Archive] - CodingForums.com

christrinder

09-01-2003, 09:59 AM

There seems to be plenty of posts out there on the web about this, but everybody else's solution dosn't seem to work for this particular case. It's pretty early in the morning for me to expect my brain to be functioning properly, so maybe I have missed something, or maybe its not possible to hide a select menu? Any ideas.... please!?
- - - -

<script>
if (whatever...)
{
AddNewMatrixItem.divDrpJobRoleID.display = "inline";
}
</script>

<div id="divDrpJobRoleID" style="display:none;">
<select name="DrpJobRoleID" disabled class="MediumSelect"></select>
</div>

Kor

09-01-2003, 10:45 AM

<html>
<head>
<script language="JavaScript">
function objectSetup() {
zsel = new layerSetup("sel","visible");
}
function layerSetup(id,visibility) {
this.obj = document.getElementById(id).style;
this.obj.visibility = visibility;
return this.obj;
}
function hideSelect() {
zsel.visibility = "hidden";
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="objectSetup()">
<select id="sel">
</select>
<input type="button" onclick="hideSelect()" value="Hide"><input type="button" onclick="objectSetup()" value="Show">
</body>
</html>

If you wanna make it cross-browser, for older browsers, use a JS browser detector, than keep in mind that for IE4, the syntax will be something like

this.obj = document.all[id].style;

and for NS4

this.obj = document.layers[id];

christrinder

09-01-2003, 10:59 AM

Thanks for that Kor. Never seen that method used before, but it seems to work on your example. There is one problem however, I need to effectively replace the select menu with a label (dot.net), and therefore when the select is made invisible, I need the label to appear in it's place... theorectically no problem, but in your example, the select menu still seems to occupy space on the page. Is there anyway to make it dissappear so that the buttons (in your example), more across to the left?

Kor

09-01-2003, 11:28 AM

Nothing special. This is a usual way for hide/show/move objects, using CSS style defined in JS.

Now, your problem... Hmm.. Once you created an object, onloaad, you can not make him dissapear...:-) At least I don't know how... Maybe someone else know a method...

Another problem... Yes, you may put more objects in the same place, using usual CSS style, but make them alternate hide/visible, something like:

<html>
<head>
<script language="JavaScript">
function objectSetup() {
zsel = new layerSetup("sel","visible");
ztext = new layerSetup("text","hidden");
}
function layerSetup(id,visibility) {
this.obj = document.getElementById(id).style;
this.obj.visibility = visibility;
return this.obj;
}
function hideSelect() {
zsel.visibility = "hidden";
ztext.visibility = "visible";
}
</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="objectSetup()">
<select id="sel" class="bla">
</select>
<div id="text" class="bla">TEXT</div><br><br>
<input type="button" onclick="hideSelect()" value="Hide"><input type="button" onclick="objectSetup()" value="Show">
</body>
</html>

...if this is what you want, regarding that label under the select....

christrinder

09-01-2003, 12:28 PM

Hi again,

Thanks for all your help. I've been playing around with it and finally go it working using a span (keeps it inline). The following code is what I used if anybody is interested!

Thanks again Kor!
Chris

<script>
function CheckIfExisting()
{
if (AddNewMatrixItem.hidMatrixItemID.value > 0)
{
document.all.JobDropDownSpan.style.display = "none";
}
else
{
document.all.JobDropDownSpan.style.display = "inline";
JobsWebServiceSetup();
}
}
<script>

<td width="*" align="left" valign="middle">
<span id="JobDropDownSpan" style="display:none;">
<select name="DrpJobRoleID" disabled class="MediumSelect"></select>
</span>
<asp:Label ID="LblSelectedJobRole" Runat="server" />
</td>

Kor

09-01-2003, 01:22 PM

That's great. I forgot indee to say that is safer to use DIV's or SPAN's to indicate the CSS style, instead of ordinary tags...

On the other hand your script will work only for IE. That's Ok, If you don't care about Netscape or Mozilla.

fredmv

09-01-2003, 01:33 PM

This will result in it being more cross-browser:

<script type="text/javascript">
var ie = document.all;

function CheckIfExisting()
{
if (AddNewMatrixItem.hidMatrixItemID.value > 0)
{
(ie) ? document.all.JobDropDownSpan.style.display = "none" : document.getElementById("JobDropDownSpan").style.display = "none";
}

else
{
(ie) ? document.all.JobDropDownSpan.style.display = "inline" : document.getElementById("JobDropDownSpan").style.display = "inline";
JobsWebServiceSetup();
}
return;
}
<script>