Question

我正在学习bootstrap，我正在尝试将dropdown插件添加到我的网页。但插件显示在输出中，但它不起作用。请检查我的代码并告诉我它是否正确。

<div class="dropdown">
    <button type="button" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown" aria-expanded="true" id="dropdownMenu1">
        Product-type<span class="caret"></span>
    </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" href="#">Computers</a></li>
            <li role="presentation"><a role="menuitem" href="#">Laptops</a></li>
            <li role="presentation"><a role="menuitem" href="#">Mobiles/Tablets</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" href="#">Components</a></li>
            <li role="presentation"><a role="menuitem" href="#">Accessories</a></li>
       </ul>
</div>

我已在头部添加了bootstrap文件和jquery文件的远程链接

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

请帮帮我。我真的需要知道，我在这里做错了什么！

Answer 1

＆＃13;

$("#dropdownMenu2").on("click", "li a", function() {
    var platform = $(this).text();
    $("#dropdown_title2").html(platform);
    $('#printPlatform').html(platform);
});    

$("#SendRequest").click(function() {
    var platform = $("#dropdown_title2").html();
    var isValid = (platform !== 'Select')
    
    if (!isValid) {
        alert('Please fill in missing details');
    } else {
        alert('Thank you for submitting');
    }
});

＆＃13;

<div class="container">
    <div class="form-group">
        <label for="platform" class="control-label col-xs-2">Platform:</label>
        <div class="col-xs-10">
            <div class="dropdown" id="dropdownMenu2">
                <button class="btn btn-default"
                        data-toggle="dropdown">
                    <span id="dropdown_title2">Select</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" >
                    <li><a tabindex="-1" href="#">Android</a></li>
                    <li><a tabindex="-1" href="#">IOS</a></li>
                    <li><a tabindex="-1" href="#">Windows Phone</a></li>
                </ul>
            </div>
    </div>
    
    
    <div class="form-group">
        <label for="printPlatform" class="control-label col-xs-2">
            Platform:
        </label>
        <div class="col-xs-10">
            <span id="printPlatform"></span>
        </div>
    </div>
    
    <div class="clearfix"></div><br/>
    
    <button class="btn btn-primary" id="SendRequest">
        Send Request
    </button>
</div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
      <script src='https://getbootstrap.com/dist/js/bootstrap.js'></script>
    <link rel='stylesheet' type='text/css' href='https://getbootstrap.com/dist/css/bootstrap.css'>



<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO Question:
    <a href='http://stackoverflow.com/q/25812022/1366033'>
        Bootstrap JQuery: dropdown menu validation on selected item
    </a><br/>
    Fork This Skeleton Here: 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'>
        Bootstrap 3 Skeleton
    </a><br/>
</div>

＆＃13;

Bootstrap Dropdown插件无法正常工作？

1 个答案: