CODEWITHSUNDEEP
jqueryselectresetbootstrap-modaljquery-chosen
Charles Okwuagwu
Charles Okwuagwu

Reputation: 10866

Reset selected item to default on a query-Chosen list when bootstrap-modal popup form shows

How do you reset the selected item in drop down list on a modal popup form?

EDIT: I am also using https://github.com/harvesthq/chosen

to manage the lists

This does not work:

<div class="col-lg-9">
    <select class="form-control input-sm" id="branch1">
        <option value="2185529A">Complaint</option>
        <option value="2385529A">Request</option>
        <option value="2585529A">Enquiry</option>
    </select>
</div>

<!-- scripts -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-modalmanager.js"></script>

$('#frmCase').on('show', function () {
    $.clearFormFields(this)
    $('#branch1').get(0).selectedIndex = 1;
    $('#branch2').get(0).selectedIndex = 1;
});

Upvotes: 0

Views: 1408

Answers (2)

Charles Okwuagwu
Charles Okwuagwu

Reputation: 10866

I eventually found a solution thanks to @norlihazmey-ghazali comments on Chosen

        $('#frmCase').on('shown', function (e) {
            $.clearFormFields(this)
            $('#branch1').get(0).selectedIndex  = 0;
            $('#branch2').get(0).selectedIndex  = 0;

            $('#branch1').trigger('chosen:updated');
            $('#branch2').trigger('chosen:updated');
        });

Upvotes: 0

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Use event shown.bs.modal handler:

$('#yourModalIdOrSelector').on('shown.bs.modal', function (e) {
  // 1 - select second option, set to 0 for first option
  $('#branch1').get(0).selectedIndex = 1;
  $('#branch2').get(0).selectedIndex = 1;
});

This event is fired when the modal has been made visible to the user. otherwise use show.bs.modal. Suite it with your code.

Upvotes: 1

Related Questions