[Solved] How to display the specific Text on change of HTML Select?

Question

0.00/5 (No votes)

See more:

Hi All,

I have an HTML Select(Dropdown) control in my web form with the following options:

HTML

<select class="body_text" name="critical">
   <option value="Select"> Select </option>
   <option value="LOW"> Low </option>
   <option value="NORMAL"> Normal </option>
   <option value="HIGH"> High </option>
   <option value="CRITICAL"> Critical </option>      
</select>

As in ASP Server control its much easier to handle dropdownlist selection change events.
Just like that I want to Display the text in a DIV on the following Scenario using HTML Select Control and cannot use runat="server" in the control:

If the Selection is LOW the DIV should display:

C#

"Priority Low: The selection is Low"

If the Selection is NORMAL the DIV should display:

C#

"Priority Normal:The selection is Normal"

If the Selection is HIGH the DIV should display:

C#

"Priority High: The selection is High"

If the Selection is CRITICAL the DIV should display:

C#

"Priority Critical: The selection is Critical"

How can I apply this scenario using JavaScript. Please Help.

Thanks,
AR.

Posted 19-Dec-13 20:56pm

AR547

Updated 12-May-14 1:05am

v3

Add a Solution

Comments

Karthik_Mahalingam 20-Dec-13 3:50am

you have one DIV or 4 div's ??

2 solutions

Solution 1

With the help of Jquery selector you can achieve this:-

JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript">

$(function(){

$('.body_text').change(function(){
var a = $(this).val();
var msg = 'Priority "+ a +": The selection is "+ a +"';
$('div').html(msg); // selector for div

});

});
</script>

This will resolve your problem....

Posted 19-Dec-13 21:45pm

Jain Nishant

Updated 19-Dec-13 22:28pm

v2

Comments

AR547 20-Dec-13 3:53am

Brilliant... (y)

Jain Nishant 20-Dec-13 4:40am

Thanks...

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

AR547 · Accepted Answer · 2013-12-19T22:05:00

Next time I will try myself first then put my question on CodeProject. Why I always give up :/

Finally solved it through javascript as I asked.. :)

HTML

<script language="JavaScript">

var DivTxt = new Array()
DivTxt[0] = "Please Select Priority"
DivTxt[1] = "Priority Low: The selection is Low"
DivTxt[2] = "Priority Normal: The selection is Normal"
DivTxt[3] = "Priority High: The selection is High"
DivTxt[3] = "Priority Critical: The selection is Critical"

function getText(slction){
txtSelected = slction.selectedIndex;
document.getElementById('textDiv').innerHTML = DivTxt[txtSelected];
}
</script>


<Select class="body_text" name="critical" onchange="getText(this)">
<option value="Select"> Select </option>
   <option value="LOW"> Low </option>
   <option value="NORMAL"> Normal </option>
   <option value="HIGH"> High </option>
   <option value="CRITICAL"> Critical </option>      
</select>
<div id="textDiv" style="color:Green; font-family:Calibri; font-size:small; font-weight:bold"> </div>

[Solved] How to display the specific Text on change of HTML Select?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us