PDA

Click to See Complete Forum and Search --> : changing text based on a select box

esthera
09-02-2003, 07:25 AM
I have a select box on the top of my screen that posts to an asp.

Now I want to put text below the select box that changes based on what is selected.

For example if <select name=cat><option value=1>test</option><option value=26>new test</option><option value=27>Test Category</option><option value=28>cat</option></select>d

what code do I need to put in if when it value 1 is chosen it says below "thanks for choosing 1" and when the next one is shown it has another predetermined message?

Thanks in advance. I am an asp programmer tyring to learn javascript
Fang
09-02-2003, 09:11 AM
<script type="text/javascript">
<!--
function ShowText(idx) {
var txt=["example test","example new test","example Test Category","example cat"];
document.getElementById('div1').firstChild.data=txt[idx];
}
//-->
</script>

</head>
<body>
<select name=cat onchange="ShowText(this.options[this.selectedIndex].value);">
<option value=0>test</option>
<option value=1>new test</option>
<option value=2>Test Category</option>
<option value=3>cat</option>
</select>
<div id="div1">&nbsp;</div>
</body>
esthera
09-02-2003, 09:56 AM
thanks for your help,

How would you change this so that I can set the bottom textbox equal to a large amount of text . (Really a list of items) It would be easier not to have them in the same array.
Fang
09-03-2003, 01:28 AM
The easiest is probably changing the visibility of the relevant list of items:

<script type="text/javascript">
<!--
var Previous=0;
function ShowText(idx) {
document.getElementById('div'+Previous).className="hide";
Previous=idx;
document.getElementById('div'+idx).className="show";
}
//-->
</script>
<style type="text/css">
<!--
.hide{display:none;}
.show{display:block;}
-->
</style>
</head>
<body>
<select name=cat onchange="ShowText(this.options[this.selectedIndex].value);">
<option value=0>test</option>
<option value=1>new test</option>
<option value=2>Test Category</option>
<option value=3>cat</option>
</select>
<div class="show" id="div0">
<ul>
<li>info test</li>
<li>info test</li>
</ul>
</div>
<div class="hide" id="div1">
<ul>
<li>info new test</li>
<li>info new test</li>
</ul>
</div>
<div class="hide" id="div2">
<ul>
<li>info Test Category</li>
<li>info Test Category</li>
</ul>
</div>
<div class="hide" id="div3">
<ul>
<li>info cat</li>
<li>info cat</li>
</ul>
</div>
</body>
esthera
09-03-2003, 02:28 AM
Your example works great but when I implement it to my code it doesn't work. I think I know why. My id's are actually taken from a db so <select name=cat will have option 2 , then 20, then 22 - not in order. I created the div's with the corrosponding number but it still didnt' work. Is their an easy way to edit this to work?

Thanks for your help.

Esther
esthera
09-03-2003, 02:37 AM
Please ignore my last post.

It works great!!!

Thanks for your help!