Change option when selected

Question

I have a reservation form. In case if one of my customers fall into a problem, I want them to call me in a time that they prefer. For that, I have created two drop down list boxes. First combo box should contain two options (as given in the snippet) with Call today selected by default. If second option Call Tomorrow is chosen, the second drop-down list should be filled with the available time slots like:

12:00
13:00
16:00
20:00
...
...

and so forth. How could this be achieved?

  
  $("#call-day").change(function(e){
    val=$("option:selected",this).val();
    if(val=="today"){
      
    }else if(val=="tomorrow"){
      
    }
  });

<select name="call-day" id="when-ajax">
  <option class="today">Call Today</option>
  <option class="tomorrow">Call Tomorrow</option>
</select>

<select name="hours">
  <option>Call Now</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

thanks @Difster my english so bad after jquery I'm thinking improve my english if I could.my question is chancing select option according to my select — ani_css, Apr 14 '17 at 07:59
. it was like that what I want but I did it finally thanks http://codepen.io/cowardguy/pen/dWPRJP — ani_css, Apr 14 '17 at 08:49

score 1 · Answer 1 · answered Apr 14 '17 at 07:27

Your question is so vague. Please reword it. From what I understood out of your description, following should help you to achieve what you are trying to. Note that I took the liberty to assume certain facts.

  
  $("select[name='call-day']").change(function(e){
    val=$(this).val();
    if(val=="today"){
      //What you want to do here is not mentioned. So I am leaving it blank
    }else if(val=="tomorrow"){
      //Available time slots should be retrieved from some persistent location. Assuming it is already done...
      var availableSlots = ["12:00", "13:00", "14:00", "16:00"];
      $("select[name='hours']").empty();
      $("select[name='hours']").append("<option value=''>--Select Time--</option");
      for(i in availableSlots){
        var item = availableSlots[i];
        var optionElement = "<option value='"+ item +"'>" + item + "</option>";
        $("select[name='hours']").append(optionElement);
      }
    }
  });

<select name="call-day" id="when-ajax">
  <option value="today">Call Today</option>
  <option value="tomorrow">Call Tomorrow</option>
</select>

<select name="hours">
  <option>Call Now</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Change option when selected

1 Answers1