Question

我有两个下拉菜单。一个是让用户从＆＃39;中选择一个时间，另一个是选择＆＃39;时间直到＆＃39;。为了确保用户不会在第一次之前的第二次下拉菜单上选择时间，我想从第二次下拉列表中删除所有时间，这些时间早于第一次下拉列表中选择的时间{通过javascript）。我怎么能这样做？

<select class="fromWhen form-control" name="From" id="">
    <option value=""></option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">1:00 PM</option>
    <option value="13:30:00">1:30 PM</option>
    <option value="14:00:00">2:00 PM</option>
</select>


<select class="untilWhen form-control " name="Until" id="">
    <option value=""></option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">1:00 PM</option>
    <option value="13:30:00">1:30 PM</option>
    <option value="14:00:00">2:00 PM</option>
</select>

Answer 1

您必须创建代码，您必须清除第二个div的所有选项。当他选择第一个选项（时间从）然后显示时间直到选项和条件如果（时间直到）小于（时间）然后删除该div。

检查代码的工作情况...... https://jsfiddle.net/Arsh_kalsi01/Lr8uxzs5/

<script
              src="https://code.jquery.com/jquery-3.1.1.min.js"
              integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous"></script>

<select class="fromWhen form-control" name="From" id="">
    <option value="0">Select Time From</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">1:00 PM</option>
    <option value="13:30:00">1:30 PM</option>
    <option value="14:00:00">2:00 PM</option>
</select>


<select class="untilWhen form-control " name="Until" id="">
    <option value="0">Select Time Until</option>
    <option value="12:00:00">12:00 PM</option>
    <option value="12:30:00">12:30 PM</option>
    <option value="13:00:00">1:00 PM</option>
    <option value="13:30:00">1:30 PM</option>
    <option value="14:00:00">2:00 PM</option>
</select>





<script>
$(document).ready(function(){
    var data = $(".untilWhen").html();
  $(".untilWhen").html("");

  $(".fromWhen").on('change',function(){
    var fromval = $(this).val();
    $(".untilWhen").html(data);
    $(".untilWhen").find("option").each(function(){
    var obj = $(this);
        if(obj.val()<=fromval)
      {
obj.remove();
            }
    });

  });

});
</script>

Answer 2

在第一个下拉列表中使用onChange事件。
完成此质量检查 - Change event on select dropdown。

Answer 3

如果要删除元素本身及其中的所有内容，请使用.remove（）。除了元素本身之外，还删除了与元素关联的所有绑定事件和jQuery数据。

要删除元素而不删除数据和事件，请改用.detach（）。

示例：

$("option::nth-child(1)").remove();

或者在你的情况下：

$(".untilWhen > option").remove();

如何从选择元素中删除选项

3 个答案: