Search code examples
javascriptjqueryhtmlbootstrap-modalbootstrap-datetimepicker

on modal hide, reset contents of select (which are linked with datetimepicker fields)


I have a bootstrap modal which consists of a select dropdown.

And on it's change, there is a datetimepicker that appears. Like if selected option is hours, hours will be shown else datetime.

Now, I am facing an issue clearing all these values from the modal on modal close.

I tried doing it by :

$("#shareLocationModal").on("hidden.bs.modal", function()
        {
                $("#sendDropDownOptions option").text('Now')
        });

The issue here is that all the options get changed to now.

I need to reset the contents of the select dropdown on modal close, like on modal open, selected option by default is Now against send and in expiry, selected option is Datetimeexp and also would like to maintain the input types, like input type has class hide on now etc as shown in fiddle.

Here is a fiddle : Fiddle


Solution

  • If I understand you correctly, you mean you want to set the now option back in the select, and the other fields that depend on it should reset to their corresponding values as well. If that is the case, this is what I did. I added values to the options of the select:

    <select id="sendDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Send Options" class="form-control" style="width:100%;">
    <option value="Now">Now</option>
    <option value="Datetime">Datetime</option>
    <option value="Now">Hours</option>
    
    </select>
    

    Then I set the value of the select, and trigger the change event:

    $("#send").on("click", function()
            {
                    $("#sendDropDownOptions").val('Now').trigger('change');
            });
    

    here's the fiddle with the changes: https://jsfiddle.net/5m966drd/