CODEWITHSUNDEEP
javascriptjqueryajaxhideshow
Phaby Amardy
Phaby Amardy

Reputation: 81

jquery to show hidden text when an option is selected

  <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

Upvotes: 0

Views: 142

Answers (3)

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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/

Upvotes: 0

mguimard
mguimard

Reputation: 1891

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();
    }
})

Upvotes: 0

Related Questions