CODEWITHSUNDEEP
javascriptjqueryhtml
UI_Dev
UI_Dev

Reputation: 3417

How to get options text in select dropdown in jquery

Here, I need to get options text from the select dropdown and do some operations. But, I don't know where I missed. I am getting both the options text. Here what I tried.

$('#sel').change(function(){
    alert($(this).val());
   temp = $('#sel option:selected').text();
    alert("temp value " +temp);
    if(temp = "Option 1")
{
    alert("Option 1 is selected");
   //DO SOME OPERATIONS
}
 if(temp = "Option 2")
{
    alert("Option 2 is selected");
    //DO SOME OPERATIONS
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
    <option value="1">Option 1</option>
     <option value="2">Option 2</option
      <option value="3">Option 3</option
</select>

JS FIDDLE

Upvotes: 0

Views: 370

Answers (7)

jmore009
jmore009

Reputation: 12923

your comparative operators are incorrect, it should be

temp == "Option 1"

not

temp = "Option 1"

FIDDLE

Also you should remove .change(); at the end of your function if you don't want your code executing on page load.

Upvotes: 1

Ryan
Ryan

Reputation: 14649

$('#sel').change(function(){
    var temp = this[this.selectedIndex].innerHTML;
    if(temp == "Option 1") {
        alert("Option 1 is selected");
    }
    if(temp == "Option 2") {
        alert("Option 2 is selected");
    }
    if(temp == "Option 3") {
        alert("Option 3 is selected");
    }
});

Also add this <option selected disabled>Options:</option> to your select box in order to have all options available for the event.

Demo

Upvotes: 1

kazikai
kazikai

Reputation: 86

temp = "Option 1" is mistaken expression

temp == "Option 1" or temp === "Option 1" is correct expression

See below

$('#sel').change(function(){
    alert($(this).val());
   temp = $('#sel option:selected').text();
    alert("temp value " +temp);
    if(temp === "Option 1")
{
    alert("Option 1 is selected");
   //DO SOME OPERATIONS
}
 if(temp === "Option 2")
{
    alert("Option 2 is selected");
    //DO SOME OPERATIONS
}
}).change();

Upvotes: 1

Rohit Suthar
Rohit Suthar

Reputation: 3628

Try like this -

Html -

<select id='job_title'>
    <option value='' class='job' role=''>- Select -</option>
    <option value='1' class='job1' role='Accountant'>Accountant</option>
    <option value='2' class='job2' role='Dev. Support'>Dev. Support</option>
</select>

<br />
<input type='text' id='catch_value'>

jQuery - 

$('#job_title').live('change', function(){
    var m = (this.value);
    var n = $('.job'+m).attr('role');
    $('#catch_value').val(n);
    return false;
});

Eg. - Fiddle Link

Upvotes: 1

codingrose
codingrose

Reputation: 15699

You have used assignment operator. It should be == instead of =.

if (temp == "Option 1") {
    alert("Option 1 is selected");
}
if (temp == "Option 2") {
    alert("Option 2 is selected");
}

See updated fiddle here.

Upvotes: 1

Wesley Smith
Wesley Smith

Reputation: 19571

You are missing > in two places:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="sel" id="sel">
    <option value="1">Option 1</option>
     <option value="2">Option 2</option> <!-- here -->
      <option value="3">Option 3</option> <!--and here -->
</select>

Upvotes: 1

SimarjeetSingh Panghlia
SimarjeetSingh Panghlia

Reputation: 2200

js fiddle

$('#sel').change(function(){
    alert($(this).val());
   temp = $('#sel option:selected').text();
   alert("temp value " +temp);
   if(temp == "Option 1")
   {
       alert("Option 1 is selected");
   }
   if(temp == "Option 2")
   {
       alert("Option 2 is selected");
   }
});

Upvotes: 1

Related Questions