CODEWITHSUNDEEP
jqueryselecttext
user2142702
user2142702

Reputation: 13

jQuery - Set html of an element on select change

I have a select element called JobsList and I need it to set the html value of another element, jobDesc. I don't understand what I'd need to do, or where to start, I'm relatively new to jQuery.

It would have to set the text of the element to something predefined for each option, like if the option selected was Citizen, it would set jobDesc to "You have no real role in society".

Upvotes: 0

Views: 1180

Answers (5)

bipen
bipen

Reputation: 36531

use change event to track the chnaged event... and put the value...

try this

 $('#joblistID').change(function(){
    if($(this).val() == "Citizen"){
        $('#elementId').val("You have no real role in society");//if input
        $('#elementId').text("You have no real role in society");// or if otner element
    }
 });

you can work for others in similar ways..

or make an array of options value

html

...
<option value="citizen">Citizen</option>
<option value="test">Test</option>
....

jquery

 var a= new Array();
a['citizen']='You have no real role in society';
a['test']='test word'
.....
$('#joblistID').change(function(){
        var currvalue=$(this).val();
        $('#elementId').val(a[currvalue]);//if input
        $('#elementId').text([currvalue]);// or if otner element

 });

Upvotes: 0

pdoherty926
pdoherty926

Reputation: 10349

var job_list_value = $('#JobsList').val();
var message;

if (job_list_value === "Citizen") {
    message = "You have no real role in society");
} else if (job_list_value === "other") {
    message = "other statement";
} else {
    message = 'Default';
}

$('#elementId').html(message);

Upvotes: 1

Jai
Jai

Reputation: 74738

See if your html is like this:

html:

<select id='joblist'>
  <option value='0'>---job list---</option>
  <option value='Student'>Student</option>
  <option value='Citizen'>Citizen</option>
</select>
<div id='jobdesc'></div>

then jQuery should be:

$(function(){
     $('#joblist').change(function () {
         if ($(this).val() == 'Student') {
             $('#jobdesc').html('You need to study good things.');
         } else if ($(this).val() == 'Citizen') {
             $('#jobdesc').html('"You have no real role in society" it\'s not true.');
         } else {
             $('#jobdesc').html('Please choose a job from above list.');
         }
     }).change();
});

CHECKOUT THIS FIDDLE

Upvotes: 0

DayTimeCoder
DayTimeCoder

Reputation: 4332

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Javascript

// # is used for filtering by element ID
    if($('#JobsList').val() == "Citizen")
       $('#jobDesc').html("You have no real role in society");
    else    if($('#JobsList').val() == "other")
       $('#jobDesc').html("other statement");

Upvotes: 0

PSR
PSR

Reputation: 40318

if($('#JobsList').val() == "Citizen")
   $('#elementId').html("You have no real role in society");
else    if($('#JobsList').val() == "other")
   $('#elementId').html("other statement");

if select options are more then use switch instead of if-else.

Import jQuery files before using this code.

Upvotes: 0

Related Questions