bootstrap 3 下拉条选项 dropdown select

<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>
    
    
    <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>





<!-- 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>

$("#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');
    }
});

DEMO

原文:http://jsfiddle.net/KyleMit/5p341amh/

本文:bootstrap 3 下拉条选项 dropdown select

Leave a Reply