...

View Full Version : alert value



skipion
01-18-2006, 11:01 AM
I want to print out (with an alert) the value corresponding to the selectbox, but somehow it doesnt seem to work out. How can I make it work please ?

<form name="aform">

<SELECT size=4 multiple NAME="GO" onClick="alert(aform.GO.value )">
<OPTION value="a">Example a
<OPTION value="b">Example b
<OPTION value="c" selected>Example c
<OPTION value="d">Example d
<OPTION value="e">Example e
<OPTION value="f">Example f
<OPTION value="g">Example g
<OPTION value="h">Example h
</SELECT>

glenngv
01-18-2006, 11:11 AM
<select size="4" multiple="multiple" name="GO" onclick="alert(this.options[this.selectedIndex].value )">
But since it is a multiple select, there can be multiple selected options. So you need to loop through each option and checked if it is selected.

<select size="4" multiple="multiple" name="GO" onclick="showSelected(this)">
...
function showSelected(oSel){
var str = "";
var len = oSel.options.length;
for (var i=0; i<len; i++){
if (oSel.options[i].selected){
str += "\n" + oSel.options[i].value;
}
}
if (str != ""){
alert("The selected items are:\n" + str);
}
else{
alert("There are no selected items.");
}
}

skipion
01-18-2006, 11:32 AM
thanks for answering, it was very helpfull.. im sorry about the multiple thing, i copied and pasted it from a site, i don't want that in. Im having trouble with my general script though.. it makes use of that selectionbox and displays the corresponding div when a selection is made. However when I select 'demo c' I can't jump back to 'demo a'. How come ?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
<!--
.demo {color:#000033; background-color:#cccccc; layer-background-color:#cccccc;
position:absolute; top:30px; left:100px; width:480px; height:280px;
z-index:99; visibility:hidden;}
-->
</style>



<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
// -->
</script>

</head>
<body>
<form name="aform" onload=toggleBox('a',1);>

<select size="4" name="GO" onclick="toggleBox(this.options[this.selectedIndex].value,1);">
<OPTION value="a" selected>Example a
<OPTION value="b">Example b
<OPTION value="c">Example c
</SELECT>

<div ID="a" class="demo">
demo
</div>

<div ID="b" class="demo">
demo b
</div>

<div ID="c" class="demo">
demo c
</div>



</body>
</html>

Kor
01-18-2006, 11:58 AM
SELECT does not support onclick event(in fact OPTION, at least not in IE), use onchange instead. And, if the select is not multiple, you may use the select's value (which in this case is the same with the selected option's value.

onchange="toggleBox(this.value,1)">

skipion
01-18-2006, 12:31 PM
ok, thanks.. How about the problem that I cant swap back to demo a ?
For example i select 'c' in the selectionbox, the c div appears, then when I select 'b' the b div doesnt appear.

MRMAN
01-18-2006, 12:57 PM
the problem was that the div tags wern't hiding. and therefore c was always going to be top.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
<!--
.demo {color:#000033; background-color:#cccccc; layer-background-color:#cccccc;
position:absolute; top:30px; left:100px; width:480px; height:280px;
z-index:99; visibility:hidden;}
-->
</style>



<script type="text/javascript">
<!--

var previouse = "";
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
if(previouse != "")
{
document.layers[previouse].style.visibility = "hide";

}

}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
if(previouse != "")
{
var obj = document.getElementById(previouse);
obj.style.visibility = "hidden";

}
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
if(previouse != "")
{
document.all[previouse].style.visibility = "hidden";

}
}

previouse = szDivID;
}
// -->
</script>

</head>
<body>
<form name="aform" onload=toggleBox('a',1);>

<select size="4" name="GO" onclick="toggleBox(this.options[this.selectedIndex].value,1);">
<OPTION value="a" selected>Example a
<OPTION value="b">Example b
<OPTION value="c">Example c
</SELECT>

<div ID="a" class="demo">
demo
</div>

<div ID="b" class="demo">
demo b
</div>

<div ID="c" class="demo">
demo c
</div>



</body>
</html>

this should work
Cheers
MRMAN

Kor
01-18-2006, 12:58 PM
Wouldn't be the below code more helpfull to you? You may use as many divs as you want, just keep the correspondence with the option, without changing the code. No need ov values or id's. Just the container div id='container':


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var divs;
function hideD(){
for(var i=0;i<divs.length;i++){
divs[i].style.display='none';
}
}
function showD(s){
hideD();
s>0?divs[s-1].style.display='block':null
}
onload = function(){
divs = document.getElementById('container').getElementsByTagName('div');
hideD();
}
</script>
</head>
<body>
<select onchange="showD(this.selectedIndex)">
<option>-- select layer --</option>
<option>show a</option>
<option>show b</option>
<option>show c</option>
<option>show d</option>
</select>
<div id="container">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum