Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jquery Populating Select Boxes

Posted on 2011-10-25
5
Medium Priority
?
214 Views
Last Modified: 2012-05-12
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
Comment
Question by:petewinter
  • 3
  • 2
5 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 37023437
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
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 2000 total points
ID: 37023454
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
 

Author Comment

by:petewinter
ID: 37023489
Thanks sonawanekiran. That's great, but can we also hide the booking time label if venue option is 0?
0
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 2000 total points
ID: 37023503
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
 

Author Closing Comment

by:petewinter
ID: 37023555
Many thanks
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question