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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hiding div from <select> option

Status
Not open for further replies.
dude333

dude333

Programmer
Feb 5, 2004
11
GB
Can anyone point out what I have done wrong here please:

This should hide a <div> section when a user selects either of the last 2 options in a select box.

function showDets(item){
var selForm = document.insert;

var selChoice = selForm.dt.options.[selForm.dt.selectedIndex].value;

if(selChoice == "GN" || selChoice =="SB")
{
item.style.display == "none";
//alert("this code has reached here" + selChoice);
}
}

relevent page code:

<form name='insert' method='post' action='update.php'>
<select name='dt' onChange='showDets(dets)'>
<option value=0>Choose
$optionsc //php list of options
</select>
<div class='dets' id='dets'>
//div code html here not relevent
</div>

The options are populated from a database by php the values of the last 2 of which are "GN" and "SY".
I know that the if statement is reached on selection of either of the last 2 options because the alert displays (when not commented out)however the div won't hide.

Thanks.

 
Sort by date Sort by votes
You might need to use
document.getElementById(item).style.display='none'

Greg.
 
Upvote 0 Downvote
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function showDets(obj){
var selForm = document.insert;
var selChoice = selForm.dt.options.[selForm.dt.selectedIndex].value;
var oId = document.getElementById(obj);
if(selChoice == "GN" || selChoice =="SB"){
oId.style.display == "none";
} else {
oId.style.display == ""; // show obj
}
}
// -->
</script>
</head>
<body>

relevent page code:

<form name='insert' method='post' action='update.php'>
<select name='dt' onChange='showDets('dets')'>
<option value=0>Choose
$optionsc //php list of options
</select>
<div class='dets' id='dets'>
//div code html here not relevent
</div>
</form>
</body>
</html>
 
Upvote 0 Downvote
The error is in this section of your code:
Code: 
var oId = document.getElementById(obj);
    if(selChoice == "GN" || selChoice =="SB"){
        oId.style.display == "none";
    } else {
        oId.style.display == ""; // show obj
    }
}

When you say:
Code: 
oId.style.display == "none"
...you're asking a question, the result of which is either TRUE or FALSE. Which is not what you're after.

To SET the style.display, you need to use a SINGLE "=" sign.

Remember: "==" means "is equal to?", "=" means "set it".
 
Upvote 0 Downvote
Mr3Putt

You are correct i got in a hurry

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function showDets(obj){
var selForm = document.insert;
var selChoice = selForm.dt.options.[selForm.dt.selectedIndex].value;
var oId = document.getElementById(obj);
if(selChoice == "GN" || selChoice =="SB"){
oId.style.display = "none";
} else {
oId.style.display = ""; // show obj
}
}
// -->
</script>
</head>
<body>

relevent page code:

<form name='insert' method='post' action='update.php'>
<select name='dt' onChange='showDets('dets')'>
<option value=0>Choose
$optionsc //php list of options
</select>
<div class='dets' id='dets'>
//div code html here not relevent
</div>
</form>
</body>
</html>
 
Upvote 0 Downvote
So, Dude333, your answer lies in deleting an equals-sign (=).
Code: 
if(selChoice == "GN" || selChoice =="SB") {
  item.style.display = "none";
  //alert("this code has reached here" + selChoice); 
} else {
  item.style.display = "";
}

However, it should be noted that for Netscape (or perhaps just older versions of Netscape) the values of .display are:
Code: 
item.style.display = 'none' : to hide an element
item.style.display = null : to show an element

Again, that may be corrected in newer versions, I can't remember... but Netscape may not SHOW a hidden object by setting it's .display to '' (empty).

Good luck.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
653
ggriffit
ggriffit
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
307
lexer
lexer
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
276
TheLazyPig
TheLazyPig
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
317
malpa
malpa
MDGarcia
  • Locked
  • Question
Connection to ORACLE from OutSystems
Replies
0
Views
71
MDGarcia
MDGarcia

Part and Inventory Search

Sponsor

Back
Top