选择选项时显示隐藏文本的jQuery

Question

  <form method="get" action="processform.php">
  <b>SELECT SERVICE</b><select name="Service">
  <option value="">Select a Service</option>
  <option value="toairport">To Airport</option>
  <option value="fromairport">From Airport</option>
  <option value="DriveAround">Drive Around</option>
  <option value="PointToPoint">Point TO Point</option>
  <option value="Wedding">Wedding</option>
  <option value="Prom">Prom</option>
  <option value="Graduation">Graduation</option>
  <option value="Birthday">Birthday</option>
  <option value="Concert">Concert</option>
  <option value="SportingEvents">Sporting Events</option>
  <option value="Anniversary">Anniversary</option>
  </select>

   Airports<select name="airports">
  <option value="">Select an Airport</option>
  <option value="LGA">LaGuardia</option>
  <option value="JFK">Jonh F. Kennedy</option>
  <option value="Westchester">Westchester</option>
  <option value="Terteboro">Terteboro</option>
  <option value="Islip">Islip</option>
  </select>

I have the above code, In the service section when i click "from airport or to airport i wan the Airport option to show. thanks in advance

Answer 1

I'd suggest:

$('select[name="Service"]').change(function(){
    var v = $(this).val().toLowerCase();
    $('select[name="airports"]').toggle((v == 'toairport' || v == 'fromairport'));
}).change();

JS Fiddle demo .

You could also use a simple regular expression to test that the value ends with the word airport (which matches the requirements as posted, in that both options for which you're testing end with the string 'airport'):

$('select[name="Service"]').change(function(){
    var v = $(this).val().toLowerCase();
    $('select[name="airports"]').toggle(v.match(/airport$/));
}).change();

JS Fiddle demo .

References:

• change() .
• JavaScript regular expressions .
• String.toLowerCase() .
• String.match() .
• toggle() .
• val() .

Answer 2

Try this

$("select[name=Service]").change(function(e){
    if(e.target.value == "toairport" || e.target.value == "fromairport"){
        $("select[name=airports]").show();
    }else{
        $("select[name=airports]").hide();
    }
})

Answer 3

You might be looking for this:

$("#airports").hide()
$("#service").change(function(){
    if(this.value == 'toairport' || this.value == 'fromairport')
       $("#airports").show();
    else
        $("#airports").hide();
});

Markup:

<select name="Service" id="service">
<select name="airports" id="airports">

DEMO --> http://jsfiddle.net/jA56n/