Javascript 我的下拉菜单工作不正常_Javascript_Jquery

Javascript 我的下拉菜单工作不正常

javascript jquery

Javascript 我的下拉菜单工作不正常,javascript,jquery,Javascript,Jquery,我正在使用jquery作为下拉列表，但是有一些错误，因为它不能正常工作。我的html是 <div id="maintain_execute_suite" style="margin-left: 169px; margin-top: 102px;"> <div class="row"> <div class="col-sm-3"> <div class="panel panel-

我正在使用jquery作为下拉列表，但是有一些错误，因为它不能正常工作。我的html是

<div id="maintain_execute_suite" style="margin-left: 169px; margin-top: 102px;">
        <div class="row">

            <div class="col-sm-3">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span data-bind="label">Select One Suite</span>&nbsp;<span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Item 1</a></li>
                                <li><a href="#">Another item</a></li>
                                <li><a href="#">This is a longer item that will not fit properly</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

当我点击菜单时，它会打开，但在从列表中选择选项后，它不会显示值。我已经把它贴到小提琴上了我无法插入引导的js和css

您是否在HTML中包含jQuery

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

如果代码有效，请修复JSFIDLE中的js错误。您所需要的只是将jquery和bootstrap包含在您的小提琴中。检查，但在我的html它不工作，它是在firebug中给出错误。我已经附上了图片。检查这个我已经更新了完整的HTML页面以外的小提琴我的答案。谢谢现在它是工作。

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Generic</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div id="maintain_execute_suite" style="margin-left: 169px; margin-top: 102px;">
        <div class="row">

            <div class="col-sm-3">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span data-bind="label">Select One Suite</span>&nbsp;<span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Item 1</a></li>
                                <li><a href="#">Another item</a></li>
                                <li><a href="#">This is a longer item that will not fit properly</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script>
        $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

            var $target = $( event.currentTarget );

            $target.closest( '.btn-group' )
            .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
            .children( '.dropdown-toggle' ).dropdown( 'toggle' );

            return false;

        });
    </script>
</body>
</html>