Dropdown closes every click

Question

Dropdown closes every click

Asked 4 years, 10 months ago

Viewed 55 times

3

Good morning Guys,

I have a dropdown where I have several checkboxes contained in it. However when I click on any checkbox the dropdown selects only it and closes, I wanted to keep the dropdown open until I finish my choices.

Would that be possible? If so, how can it be done?

Dropdown:

$('#userList').append(
                '<div class="custom-control custom-checkbox ml-2">'+
                    '<input type="checkbox" class="custom-control-input" id="'+data[i].id+'">'+
                    '<label class="custom-control-label" for="'+data[i].id+'">'+data[i].nome+' '+data[i].sobrenome+'</label>'+
                '</div>'
                );

Div from the Dropdown:

<div  class='col-xs-12 col-sm-4 col-md-4 col-lg-2 dropdown'>
                    <button class="btn btn-info botao" type='button' id="user" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-users"></i></button>
                    <div class="dropdown-menu" aria-labelledby="user" id="userList">

                    </div>
                </div>

2 answers

5

$(document).on('click', '#userList', function (e) {
    e.stopPropagation();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">

<div class="row no-gutters">
    <div class='col-xs-12 col-sm-4 col-md-4 col-lg-2 dropdown'>
        <button class="btn btn-info botao" type='button' id="user" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-users"></i></button>
        <div class="dropdown-menu px-4 py-3" aria-labelledby="user" id="userList">
            <div class="form-group">
                <div class="row">
                    <div class="col-12">
                        <label class="custom-control custom-checkbox mb-0">
                            <input type="checkbox" class="custom-control-input">
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Opção 1</span>
                        </label>
                    </div>
                    <div class="col-12">
                        <label class="custom-control custom-checkbox mb-0">
                            <input type="checkbox" class="custom-control-input">
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Opção 2</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Didn’t work :/

– Diêgo Correia de Andrade

2019/08/30 at 14:27
would be able to post your dropdown code?

– Leonardo Getulio

2019/08/30 at 14:30
Posted, used as id user, changed in tbm function and did not work

– Diêgo Correia de Andrade

2019/08/30 at 14:32
Which version of bootstrap you are using?

– Leonardo Getulio

2019/08/30 at 14:38
The version is 4.0.0

– Diêgo Correia de Andrade

2019/08/30 at 14:40
test there without the append to see if it works, if yes later integrates the append.

– Leonardo Getulio

2019/08/30 at 14:41
Also doesn’t work :/

– Diêgo Correia de Andrade

2019/08/30 at 14:42
Diego, check here the snippet I posted. For reference I’m using Chrome on Windows.

– Leonardo Getulio

2019/08/30 at 14:53
Man, I don’t know what’s going on 'cause I made an identity of yours and it didn’t work

– Diêgo Correia de Andrade

2019/08/30 at 14:57
If running here in stackoverflow works? if yes can try to disable some JS library of yours to see if it is not influencing.

– Leonardo Getulio

2019/08/30 at 15:01
I tested your example and tbm was not, now I have to find out which Bib is influencing this...

– Diêgo Correia de Andrade

2019/08/30 at 15:10
Out that neither the checkbox appears here... With your application

– Diêgo Correia de Andrade

2019/08/30 at 15:12
Let’s go continue this discussion in chat.

– Diêgo Correia de Andrade

2019/08/30 at 15:12

Show 8 more comments

Browser other questions tagged php javascript jquery html5

You are not signed in. Login or sign up in order to post.

by Ana Teixeira • **107** points · Answer 1 · 2019-08-30T14:33:54+00:00

#userlist is a select?

If you give him the parameter Multiple, it Works ;)

example

<select multiple >
  <option value="" disabled selected>Choose your country</option>
  <option value="1">USA</option>
  <option value="2">Germany</option>
  <option value="3">France</option>
  <option value="4">Poland</option>
  <option value="5">Japan</option>
</select>