Bootstrap dropdown hide on click select hide dropdown

Question

on click on select in dropdown menu the dropdown become hide the bootstrap dropdown menue i want not hide when i select something within select dropdown

<li> <a href="#"  data-toggle="dropdown" aria-haspopup="true" class="myr-text" aria-expanded="false"> <img src="images/flag-icon.jpg" alt=""> / MYR / English</a>
              <ul class="dropdown-menu select-dropdown-menu">

                <li><p>Regional settings for your next visit</p></li>
                <li role="separator" class="divider"></li>
                <li><form class="form-horizontal" role="form">
                    <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
                      <option selected> Malaysia </option>
                      <option> Malaysia 01 </option>
                      <option> Malaysia 02 </option>
                      <option> Malaysia 03 </option>
                      <option> Malaysia 04 </option>
                    </select>
                  </form></li>
                <li><form class="form-horizontal" role="form">
                    <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
                      <option selected> Malaysian Ringgit (RM) </option>
                      <option> Malaysian Ringgit (RM) 01 </option>
                      <option> Malaysian Ringgit (RM) 02 </option>
                      <option> Malaysian Ringgit (RM) 03 </option>
                      <option> Malaysian Ringgit (RM) 04 </option>
                    </select>
                  </form></li>
                <li><form class="form-horizontal" role="form">
                    <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
                      <option selected> English </option>
                      <option> Urdu </option>
                      <option> Punjabi </option>
                      <option> Pashtoo </option>
                    </select>
                  </form></li>

              </ul>
            </li>

Here is my jquery code which i am using for displaying and hiding

$("body .social-nav li ul.dropdown-menu").click(function(event) {
$(this).closest('.social-nav li').addClass("open-deopdown");
    });

$(body).click(function(event) {
$(this).closest('body ul.social-nav li').removeClass("open-deopdown");
    });

Sorry I couldn't understand your question. You want to hide an element when you select something in the dropdown menu? — SHiRKiT
– SHiRKiT, Commented Sep 12, 2015 at 19:22

Brian Leishman · Accepted Answer · 2018-02-04 22:54:19Z

1

Try this:

$('body').click(function(event){
     if($(event.target).closest('.open-dropdown').length==0)
     {
        $('li').removeClass("open-dropdown");

         }
    });

$('.myr-text').click(function(){
    $(this).closest('.social-nav li').toggleClass("open-dropdown");
    });

edited Feb 4, 2018 at 22:54

Brian Leishman

8,67712 gold badges62 silver badges103 bronze badges

answered Sep 13, 2015 at 6:33

Muhammad Nasir

2,2045 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap dropdown hide on click select hide dropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related