当用户从下拉菜单中选择项目时，如何防止引导程序模式关闭

Question

In an example below, when user clicks on any item from dropdown list, then the modal window is automatically trigerred to close. The modal window shall close when user clicks on SEND button. Category and message are required to activate the SEND button (but this is out of topic).

I tried to prevent that behaviour by

$('.dropdown-menu').click(function(event){
    event.stopPropagation();
});​

,but it doesn't change anything.

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form role="form">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="dropdown">
                                <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select category<span class="caret"></span></button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a href="">Category 1</a></li>
                                    <li><a href="">Category 2</a></li>
                                    <li><a href="">Category 3</a></li>
                                    <li><a href="">Category 4</a></li>
                                    <li><a href="">Category 5</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="message-text" class="control-label">MESSAGE</label>
                                <textarea class="form-control" id="message-text"></textarea>
                            </div>
                        </div>
                    </div>
                </form>                     
                <div class="row">
                    <div class="col-xs-2">
                        <p><a class="btn btn-primary" href="#" role="button">SEND</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You're using a dropdown meant for the navbar, which will cause an action to take place the moment it's clicked because it's intended to send people to a URL. Instead, use a standard HTML dropdown and style it to look like a button.

BOOTPLY

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form role="form">
                    <div class="row">
                        <div class="col-xs-12">
                            <select class="btn btn-default">
                              <option value="1">Option 1</option>
                              <option value="2">Option 2</option>
                              <option value="3">Option 3</option>
                              <option value="4">Option 4</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="message-text" class="control-label">MESSAGE</label>
                                <textarea class="form-control" id="message-text"></textarea>
                            </div>
                        </div>
                    </div>
                </form>                     
                <div class="row">
                    <div class="col-xs-2">
                        <p><a class="btn btn-primary" href="#" role="button">SEND</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I assume you want the selected action to be used for something, and as a result you'll want that action to be displayed to the user once they select it to keep things obvious. Further, using an actual dropdown means you can easily pull out the selected value when the user hits the submit button. Your button is also a stylized anchor tag, so it's not going to work the way a standard button would, but I don't know your entire use case. Just pointing it out to cover all my bases.

Answer 2

You are using links without a value in href . Add '#' or any other value.

<ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
</ul>