javascript - 选择后更改选项

Question

这个问题已经有答案了:

Drop-down box dependent on the option selected in another drop-down box (8 个回答)

已关闭 4 年前。

我有一份预订表格。如果我的一位客户遇到问题，我希望他们在他们喜欢的时间给我打电话。为此，我创建了两个下拉列表框。第一个组合框应包含两个选项(如代码片段中所示)，默认情况下选择立即通话。如果选择第二个选项明天通话，则第二个下拉列表应填写可用时间段，例如:

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

等等。如何实现这一目标？

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

Answer 1

你的问题太模糊了。请改写一下。根据我对您的描述的理解，以下内容应该可以帮助您实现您想要的目标。请注意，我冒昧地假设了某些事实。

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