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

Question

I have two dropdown menus. One is enables the user pick a 'time from', The other is to pick 'time until'. In order to assure the user does not pick a time on the second dropdown that is before the first time, I want to remove all times from the second dropdown that are earlier then the time picked in the first dropdown {via javascript). How can I do this?

<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

You have to create code where you must have to clear all options of second div. When he select first option (time from) then show time until option and make condition if (time until) is less than (time from) then remove that div.

Check the working of code there ... 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

1. Use onChange event on first dropdown.
2. Go through this QA- Change event on select dropdown .

Answer 3

Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

To remove the elements without removing data and events, use .detach() instead.

Example:

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

Or in your case:

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