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> 

У меня есть код выше, в разделе сервиса когда я нажимаю «из аэропорта или в аэропорт я тусклый вариант аэропорта, чтобы показать. заранее спасибо

Answer 1

Я хотел бы предложить:

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

JS Fiddle demo.

Вы можете также использовать простое регулярное выражение, чтобы проверить, что value заканчивается словом airport (который соответствует требованиям, размещен, в том, что оба варианте, для которого вы тестирующей конца с «аэропортом» строки):

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

JS Fiddle demo.

Ссылки:

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

Answer 2

Попробуйте

$("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

Вы могли бы искать для этого:

$("#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/