Chosen drop down previous options not hide in mobile

Question

I am using chosen drop down fields and its working fine in desktop but in mobile previous drop down not hide so it seems all the drop down fields are open in mobile.

URL: https://mtest.hotcoursesabroad.com/demo-cont/hcindia/chk/ddchosen.html

help me if any one face same.

Answer 1

chosen:hiding_dropdown event does not trigger on a blur event. You'll have to trigger a chosen:close event inside chosen:showing_dropdown for each select excluding the one that triggers the event. Try the following code:

function chosen() {
  $(".chosen-select").chosen({
    disable_search_threshold: 100,
    inherit_select_classes: true,
    width: '100%'
  }).on('chosen:showing_dropdown', function (evt, params) {

    // Trigger a chosen:close event to all other chosen elements
    $(this).parent().parent().siblings().find('.chosen-select').trigger('chosen:close');

    $.js('custom-scroll').find(".chosen-results").niceScroll({
      cursorcolor:"#d1d1d1",
      cursorwidth:"10px",
      background:"#fff",
      cursorborder:"0px solid #eeeeee",
      cursorborderradius:0,
      cursoropacitymin:1,
    });
  });
}

Try my fix here .