Forum Moderators: open

Message Too Old, No Replies

Help with Select Menus

javascript,ajax,php

         

DrCopy

5:50 pm on Jul 18, 2008 (gmt 0)

10+ Year Member



<html>
<head>
<script language="javascript">
function showhide(id,sel)
{
var Test = 'Please choose'+ sel.options.selectedIndex +' an option';
var obj = document.getElementById(id);
obj.firstChild?obj.firstChild.data=txt:obj.appendChild(document.createTextNode(Test))
}
</script>
</head>
<body>

<form id="d1">
<select id="mySelect" onchange="return showhide('nav',this)">
<option id="Apple">Apple</option>
<option id="Pear">Pear</option>
<option id="Banana">Banana</option>
<option id="Orange">Orange</option>
</select>
</form>
<div id="nav"></div>

</body>
</html>

this is a simple code to show the option id into div.
problem that its only show it for once.
and when changing the option it doesn't make any sense .
its only show the first selected option only .
lets say we choose Pear it will show number 1.
when change the option its show the same id for pear i mean it show number again.
any help?
thank you

Fotiman

6:55 pm on Jul 18, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



obj.firstChild.data=txt

1. txt is not defined anywhere
2. You might want to use obj.replaceChild instead

DrCopy

10:02 am on Jul 19, 2008 (gmt 0)

10+ Year Member



thank you so much
yes problem was with the txt variable
i used to use the Text variable instead of it
<html>
<head>
<script language="javascript">
function showhide(id,sel)
{
var Test = 'Please choose'+ sel.options.selectedIndex +' an option';
var obj = document.getElementById(id);
obj.firstChild?obj.firstChild.data=Test:obj.appendChild(document.createTextNode(Test))
}
</script>
</head>
<body>

<form id="d1">
<select id="mySelect" onchange="return showhide('nav',this)">
<option id="Apple">Apple</option>
<option id="Pear">Pear</option>
<option id="Banana">Banana</option>
<option id="Orange">Orange</option>
</select>
</form>
<div id="nav"></div>

</body>
</html>

thank you so much problem resolved

DrCopy

10:10 am on Jul 19, 2008 (gmt 0)

10+ Year Member



is there any way to print the id it self instead of the indexed number?
i mean that the script now only print the index number
when choosing <option id="Pear">Pear</option> its print number 1
is there a way to make it print the word Pear?
thank you so much

Fotiman

2:11 pm on Jul 19, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You should be using the value attribute, not id. As in:
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>

Then:
var Test = 'Please choose'+ sel.options[sel.selectedIndex].value +' an option';

DrCopy

2:17 pm on Jul 20, 2008 (gmt 0)

10+ Year Member



thank you for reply.
in fact i know its better to use the values but my point that i will use values to have values and i need the ids values to have other values.
just like that for example
<select name="fruits" id="mySelect" onchange="return showhide('nav',this)">
<option id="red" value="Apple">Apple</option>
it will be like that
<?php
echo $_POST['fruits'] ;
?>
in the time when the option selected the div will show
"your choose was a red->option id apple->option value
thank you so much

Fotiman

10:39 pm on Jul 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



In that case, try this:
var Test = 'Please choose'+ sel.options[sel.selectedIndex].id +' an option';

DrCopy

9:19 am on Jul 21, 2008 (gmt 0)

10+ Year Member



super.
thank you so much
problem resolved