-2

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>
3
  • You also need opposite. After first selecting Until value, the options after that time in From should be removed.
    – Tushar
    Commented Jan 18, 2017 at 3:14
  • Why don't you use a time range picker plugin. There are lots available free. like jonthornton.github.io/jquery-timepicker Commented Jan 18, 2017 at 3:16
  • Here is lawgik: Bind change event on both the dropdowns. In handler, get the selected value using $(this).val(), Use $(otherDropdown).children('option[value="' + thatValue + '"]').prevAll().remove(); to remove all the options having time before selected time. Use nextAll in other case. Let me know if you face any problem in this.
    – Tushar
    Commented Jan 18, 2017 at 3:17

3 Answers 3

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>
1
  • Love it! Thanks!!
    – Newbie
    Commented Jan 18, 2017 at 22:42
0

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();
1
  • can you check my answer @Newbie
    – user7431951
    Commented Jan 18, 2017 at 3:37
0
  1. Use onChange event on first dropdown.
  2. Go through this QA-Change event on select dropdown.
2
  • nice answer, not spoon feeding.
    – netto
    Commented Jan 18, 2017 at 3:23
  • Ahaan @netto . Thanks for help.
    – psycho
    Commented Jan 18, 2017 at 3:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.