PDA

View Full Version : how hide temporary list items and after reappear, toggle button



lse123
06-15-2012, 01:27 PM
how hide temporary list items and after reappear, toggle button? THE BELOW SEEMS DO NOT WORK, Well?

[code]<head>

<script type="text/javascript">

function action(x){
var parag=document.getElementById("li"+x);
if(parag.style.display=="none"){
parag.style.display="block";
}else{
parag.style.display="none";
}
}

</script>
</head>
<body>

<ul>
<li id="li1">Item1</li>
<li id="li2">Item2</li>
<li id="li3">Item3</li>
</ul>
<form name="myform"><input type="button" onclick="alert(document.myform.select.value);action(document.myform.select.value)" value="show/hide"/><label>
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label></form>
</body>
</html>[code]

ApacheTech
06-15-2012, 02:00 PM
This is not a true reply yet, just fixing your post to make it easier to debug.


<head>
<script type="text/javascript">

function action(x) {
var parag = document.getElementById("li" + x);
if (parag.style.display == "none") {
parag.style.display = "block";
} else {
parag.style.display = "none";
}
}

</script>
</head>
<body>
<ul>
<li id="li1">Item1</li>
<li id="li2">Item2</li>
<li id="li3">Item3</li>
</ul>
<form name="myform">
<input type="button" onclick="alert(document.myform.select.value);action(document.myform.select.value)"
value="show/hide" /><label>
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
</form>
</body>
</html>

An answer will be given shortly.

Thank you for your patience.

In the meantime, you may find this thread helpful:

http://www.dynamicdrive.com/forums/showthread.php?t=69366

It seems to be in the same ballpark as you are after.

ApacheTech
06-15-2012, 02:16 PM
FIXED!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Page Title -->
<title>Hiding Selected List Items</title>
<!-- Meta Block -->
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<meta content="Hiding Selected List Items" name="description" />
<meta content="Hiding, Selected, List, Items" name="keywords" />
<meta content="all,index,follow" name="robots" />
<meta content="noodp" name="msnbot" />
<meta content="global" name="distribution" />
<!-- Javascript Scripts -->
<script type="text/javascript">

function doSomething() {
var x = document.getElementById('selItems').value;
var parag = document.getElementById('li' + x);
if (parag.style.display == 'none') {
parag.style.display = 'block';
} else {
parag.style.display = 'none';
}
}

</script>
</head>
<body>
<div id="page">
<ul>
<li id="li1">Item1</li>
<li id="li2">Item2</li>
<li id="li3">Item3</li>
</ul>
<input type="button" onclick="doSomething();" value="Show / Hide" />
<select id="selItems">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</body>
</html>


Your main problem was the handling of the form within the page. You don't need a form in this instance, nor do you need to pass any values into the javascript function you are calling. You can select the value from the DropDownBox by grabbing the whole element from the DOM Tree with document.getElementById(id);.