• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 217
  • Last Modified:

jquery Populating Select Boxes

I would like to populate my select boxes using jquery. Below is my html code.

<label for="venue">Venue</label>
<select name="venue" id="venue">
  <option value="0">-- Select Venue --</option>
  <option value="1">Sandown Park - 15th Nov</option>
  <option value="2">Motorcycle Museum - 17th Nov</option>
  <option value="3">Easter Road Stadium - 21st Nov</option>
  <option value="4">Lancashire CCC - 23rd Nov</option>
  <option value="5">White Hart Lane - 25th Nov</option>
</select>

<label for="booking_time">Booking Time</label>
<select name="booking_time" id="booking_time">
  <option value="1">9.30am – 11am</option>
  <option value="2">1.30am – 1pm</option>
  <option value="3">2pm – 3.30pm</option>
</select>

I would like to do the following...

1) Start with the "booking_time" field hidden.
2) If Option 1 (Sandown Park) is selected I want the booking_time field to show option 1 (9.30am – 11am) and option 2 (1.30am – 1pm)
3) If Option 2 (Motorcycle Museum) is selected I want the booking_time field to show option 1 only.
4) If Option 3 (Easter Road Stadium) is selected I want the booking_time field to show option 1 only.
5) If Option 4 (Lancashire CCC) is selected I want the booking_time field to show option 1 only.
6) If Option 5 (White Hart Lane) is selected I want the booking_time field to show option 1, 2 and 3.

Also if option 0 (Select Venue) field is reselected. I want the "booking_time" field hidden again.

How can I do this? Many thanks
0
petewinter
Asked:
petewinter
  • 3
  • 2
2 Solutions
 
Kiran SonawaneProject LeadCommented:
We can not hide options from booking time select list. We can restrict user to select the booking time according to venue. There is also other way to do this.
0
 
Kiran SonawaneProject LeadCommented:
Here is example below.
Demo : http://jsfiddle.net/hyUcs/
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Kiran Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
  
        hide_booking_time();
        
        $("#venue").change(function(){
         
          switch($(this).val())
          {
            case "1":
              $("#booking_time").html('<option value="1">9.30am – 11am</option>');
              $("#booking_time").append('<option value="2">1.30am – 1pm</option>');
            break;
            case "2":
            $("#booking_time").html('<option value="1">9.30am – 11am</option>');
            break;
            case "3":
            $("#booking_time").html('<option value="1">9.30am – 11am</option>');
            break;
            case "4":
            $("#booking_time").html('<option value="1">9.30am – 11am</option>');
            break;
            case "5":
            $("#booking_time").html('<option value="1">9.30am – 11am</option>');
              $("#booking_time").append('<option value="2">1.30am – 1pm</option>');
              $("#booking_time").append('<option value="3">2pm – 3.30pm</option>');
            break;
            case "0":
            break;
          }
          
          hide_booking_time();
          
        });
  });
  
  function hide_booking_time()
  {
    ($("#venue").val() == "0") ? $("#booking_time").hide() : $("#booking_time").show();
  }



  
</script>
</head>

<body>
<label for="venue">Venue</label>
<select name="venue" id="venue">
  <option value="0">-- Select Venue --</option>
  <option value="1">Sandown Park - 15th Nov</option>
  <option value="2">Motorcycle Museum - 17th Nov</option>
  <option value="3">Easter Road Stadium - 21st Nov</option>
  <option value="4">Lancashire CCC - 23rd Nov</option>
  <option value="5">White Hart Lane - 25th Nov</option>
</select>

<label for="booking_time">Booking Time</label>
<select name="booking_time" id="booking_time">
  <option value="1">9.30am – 11am</option>
  <option value="2">1.30am – 1pm</option>
  <option value="3">2pm – 3.30pm</option>
</select>
</body>

</html>

Open in new window

0
 
petewinterAuthor Commented:
Thanks sonawanekiran. That's great, but can we also hide the booking time label if venue option is 0?
0
 
Kiran SonawaneProject LeadCommented:
Yes we can change hide_booking_time function to

 function hide_booking_time()
  {
    if ($("#venue").val() == "0") 
    {
      $("#booking_time").hide();
      $("label[for=booking_time]").hide();
    }
    else
    {
      $("#booking_time").show();
      $("label[for=booking_time]").show();
    }
  }

Open in new window

0
 
petewinterAuthor Commented:
Many thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now