jQuery if else and selected value from select tag

Why can't I get the value selected from my input, am I doing something wrong?

 if($('#target option:selected').text() == "add")
                    $("#add").show(selectedEffect, options, 500, callback );
                 else if ($('#target option:selected').text() == "exit")
                    $("#exit").show(selectedEffect, options, 500, callback );
                 else if ($('#target option:selected').text() == "refuse")
                    $("#refuse").show(selectedEffect, options, 500, callback 开发者_运维技巧);
                 else
                    alert('test');

---

var target = $('#target option:selected').val();

if(target == "add")
    $("#add").show(selectedEffect, options, 500, callback );
else if ($('#target option:selected').text() == "exit")
    $("#exit").show(selectedEffect, options, 500, callback );
else if ($('#target option:selected').text() == "refuse")
    $("#refuse").show(selectedEffect, options, 500, callback );
else
alert('test');

Check it out here http://api.jquery.com/val/

---

If you want the value use .val() method. The .text() method returns the inner text of the element selected. The .val() method will return the value attribute of the element selected. It is also of note that when using val() method on a select element. You do not have to get the selected option in the selector, you can simply call val() on the select element itself to get the selected value.

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

If the value attribute of the selected option is what you want. Then from your example this will work.

switch ($('#target').val()) {
  case "add":
    $("#add").show(selectedEffect, options, 500, callback );
    break;
  case "exit":
    $("#exit").show(selectedEffect, options, 500, callback );
    break;
  case "refuse":
    $("#refuse").show(selectedEffect, options, 500, callback );
    break;
  default
    alert('test');
    break;
}

---

<script>  
$(document).ready(function(){
    $('#colorselector').on('change', function() {
      if ( this.value == 'red')
      {
        $("#divid").show();
      }
      else
      {
        $("#divid").hide();
      }
    });
});
</script>

Do like this for every value, Change the values as per your data.

---

If you really want the text content, and not the value property, then it is possible that you need to trim whitespace.

Though in your case, you don't really need the == comparison. Your code can be greatly reduced if you just use the text you get back to build the selector.

   // get (and trim) the text content
var txt = $.trim( $('#target option:selected').text() );

$('#' + txt).show(selectedEffect, options, 500, callback );