jQuery get specific option tag selected values

Question

I have this,

<select id="customUser_id" name="customUser_id">
  <option value="2" label="Friends Of Friends">Friends Of Friends</option>
  <option selected="selected" value="3" label="Friends Only">Friends Only</option>
  <option value="4" label="Specific People">Specific People</option>
  <option value="0" label="Only Me">Only Me</option>
</select>

I want to get the value of Selected Option using jQuery.

Currently I am using onchange() event like this,

$('#customUser_id').change(function(){
    if(($(this).val()==2)){
        $("#customWallPost3").text("Only Friends of Friends can see this");
    }
    else if(($(this).val()==3)){
        $("#customWallPost3").text("Only Friends can see this");
    }
    else if(($(this).val()==4)){
        $("#customWallPost3").text("Only the people above can see this");
    }
    else if(($(this).val()==0)){
        $("#customWallPost3").text("Only I can see this");
    }
    else{
        $("#customWallPost3").text("");
    }
});

this is only working when change the option value, but I also want to get selected option value with this. Thanks in advance

Answer 1

not sure what your are asking for...

I also want to get selected option value with this..

but to get the selected option value, you use

  $('#customUser_id').val();

this gives you the selected value of the <select> with id as customUser_id

UPDATED

if you want to get the text of selected option then you can do

 $("#customUser_id option:selected").text();

Answer 2

Unsure with your question as $('#customUser_id').val() gives the value which is selected.

Still if you wish, with this you can iterate through each of the options and you can get the element with selected attribute

$('#customUser_id').children().each(function() {
    if($(this).attr('selected')) {
        // here you have the element with _selected_ attribute
    }
});

If you wish you can directly get the attribute which is selected

var selectedElt = $('#customUser_id').children('[selected=selected]');

Answer 3

you can create it in a more friendly way - using an array and a function:

LIVE DEMO

var arr_Infos = [
  'Only I can see this',                    // option value 0
  '',                                       // option value 1
  'Only Friends of Friends can see this',   // option value 2
  'Only Friends can see this',              // option value 3
  'Only the people above can see this'      // option value 4 (don't use comma)
];


function popoulateInfo(){
   var sel =  $('#customUser_id').find(":selected").val();
   $('#customWallPost3').text( arr_Infos[ sel ] ); 
}
popoulateInfo();             // run immediately

$('#customUser_id').on('change', function(){   
  popoulateInfo();           // run on change
});

Answer 4

Try this to get value of selected value:

$('#customUser_id').val();

Here is the docs http://api.jquery.com/val/

Answer 5

You mean if you want the selected option to display - "Only I can see this" or "Only friends can see this" etc.... on load, You can add this code with .ready() instead on .change()

$('#customUser_id').ready(function(){
if(($(this).val()==2)){
    $("#customWallPost3").text("Only Friends of Friends can see this");
}
else if(($(this).val()==3)){
    $("#customWallPost3").text("Only Friends can see this");
}
else if(($(this).val()==4)){
    $("#customWallPost3").text("Only the people above can see this");
}
else if(($(this).val()==0)){
    $("#customWallPost3").text("Only I can see this");
}
else{
    $("#customWallPost3").text("");
}
});

Answer 6

use trigger

$('#customUser_id').change(function(){
    // your code
}).trigger('change');