/    Sign up×
Community /Pin to ProfileBookmark

changing text based on a select box

Copy linkTweet thisAlerts:
Sep 02.2003

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

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 02.2003 — <i>
</i>&lt;script type="text/javascript"&gt;
&lt;!--
function ShowText(idx) {
var txt=["example test","example new test","example Test Category","example cat"];
document.getElementById('div1').firstChild.data=txt[idx];
}
//--&gt;
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;select name=cat onchange="ShowText(this.options[this.selectedIndex].value);"&gt;
&lt;option value=0&gt;test&lt;/option&gt;
&lt;option value=1&gt;new test&lt;/option&gt;
&lt;option value=2&gt;Test Category&lt;/option&gt;
&lt;option value=3&gt;cat&lt;/option&gt;
&lt;/select&gt;
&lt;div id="div1"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/body&gt;
Copy linkTweet thisAlerts:
@estheraauthorSep 02.2003 — 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.
Copy linkTweet thisAlerts:
@FangSep 03.2003 — The easiest is probably changing the visibility of the relevant list of items:
<i>
</i>&lt;script type="text/javascript"&gt;
&lt;!--
var Previous=0;
function ShowText(idx) {
document.getElementById('div'+Previous).className="hide";
Previous=idx;
document.getElementById('div'+idx).className="show"; <br/>
}
//--&gt;
&lt;/script&gt;
&lt;style type="text/css"&gt;
&lt;!--
.hide{display:none;}
.show{display:block;}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;select name=cat onchange="ShowText(this.options[this.selectedIndex].value);"&gt;
&lt;option value=0&gt;test&lt;/option&gt;
&lt;option value=1&gt;new test&lt;/option&gt;
&lt;option value=2&gt;Test Category&lt;/option&gt;
&lt;option value=3&gt;cat&lt;/option&gt;
&lt;/select&gt;
&lt;div class="show" id="div0"&gt;
&lt;ul&gt;
&lt;li&gt;info test&lt;/li&gt;
&lt;li&gt;info test&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="hide" id="div1"&gt;
&lt;ul&gt;
&lt;li&gt;info new test&lt;/li&gt;
&lt;li&gt;info new test&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="hide" id="div2"&gt;
&lt;ul&gt;
&lt;li&gt;info Test Category&lt;/li&gt;
&lt;li&gt;info Test Category&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="hide" id="div3"&gt;
&lt;ul&gt;
&lt;li&gt;info cat&lt;/li&gt;
&lt;li&gt;info cat&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
Copy linkTweet thisAlerts:
@estheraauthorSep 03.2003 — 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
Copy linkTweet thisAlerts:
@estheraauthorSep 03.2003 — Please ignore my last post.

It works great!!!

Thanks for your help!
×

Success!

Help @esthera spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...