PDA

Click to See Complete Forum and Search --> : List Box using Javascript

ritukhetan
01-02-2003, 06:45 AM
Hello all,

Is it possible to show a list box [multiple select] using javascript on click of a link.

If yes, how can we do it?

Looking forward to your kind response.

Regards,
Ritu
swon
01-02-2003, 07:18 AM
What do you mean, invisible to visible or what?
AdamBrill
01-02-2003, 07:21 AM
Try this:

Put this in the <HEAD>:

<script language=javascript>
function show()
{
Optionbox=document.getElementById("Box");
Optionbox.style.visibility="visible";
}
</script>

Then, put this in the <BODY>:

<div id=Box style="visibility:hidden">
<select size="1" name="D1">
<option selected>Choice1</option>
<option>Choice2</option>
<option>Choice3</option>
</select>
</div>


This will hide everything inside the div tags until someone clicks the link to show it. The link to show it would look like this:

<a href="javascript:show()">Show Option box</a>

And, in the above line, there is no space in javascript. That is added by the forums.
khalidali63
01-02-2003, 07:23 AM
How about this..:-)

<body>

<a href="javascript:showList();">Show List BOx</a><br>

<form name="frm">
<select id="list" name="listBox" onchange="processList();" style="visibility:hidden;width:160pt;height:100pt;" multiple>
<option value="default">Please select value from below
<option value="line1">Line 1
<option value="line2">Line 2
<option value="line3">Line 3
<option value="line4">Line 4
<option value="line5">Line 5
<option value="line6">Line 6
<option value="line7">Line 7
<option value="line8">Line 8

</select>
</form>
<script language="JavaScript1.2">
var listVisible = false;
function showList(){
var list = document.getElementById("list");
if(!listVisible){
list.style.visibility="visible";
listVisible = true;
}else{
list.style.visibility="hidden";
listVisible = false;
}
}

function processList(){
var list = document.frm.listBox;
var len = list.length;
for(x=0;x<len;x++){
if(list[x].selected){
alert("You selected = "+list[x].value)
}
}
}

</script>

</body>

Good Luck

Khalid
Caliban
03-23-2003, 04:14 PM
It's a simple correction ...

Change the following line:
<a href="java script:showList();">Show List BOx</a><br>

With this one:
<a href="#" onclick="javascript:showList();">Show List BOx</a><br>

If you don't make this change, when you click on the link, the browser will show you a error message: "The page doesn't exist"

The code works fine :)


Regards.
AdamBrill
03-23-2003, 04:22 PM
The forums added in the space there... But, you should actually do it like this:

<a href="#" onclick="showList(); return false;">Show List BOx</a>

You don't need the javascript: thing in there and the return false; keep it from going to the top of the page...