Bootstrap JQuery：对所选项目的下拉菜单验证

Question

I have the following twitter bootstrap dropdown menu which is part of a form:

<div class="form-group">
    <label for="platform" class="control-label col-xs-2">Platform:</label>
    <div class="col-xs-10">
        <div class="dropdown">
            <button class="btn btn-default" id="dropdownMenu2" data-toggle="dropdown">
                <span id="dropdown_title2">Select</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="dropdownMenu2">
                <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>

once the page is loaded then when a user selects an item i use this

var platform = ("Platform: " + $("#dropdown_title2").text());
$('#printPlatform').html(platform);

to set the dropdown value to a var and then display it within a modal using

<span id="printPlatform"></span><br />

I'm now looking to validate this dropdown to check an item has been selected and the default value of "select" has been changed.

Here's what I tried:

var selected = "Select"
if ($("#dropdown_title1").text == selected) {
    alert('Please fill in missing details');
}

However, when the code is run no alert dialog is displayed. Anyone know where I'm going wrong?

Current Validation for textboxs (drop down validation will be added to this method)

$(document).ready(function () {
    @*Validation for Empty fields with name formpart*@
    $('#SendRequest').click(function (e) {
        var isValid = true;            
        $("[name='formpart']").each(function () {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
                $("#basicModal").modal('show');
            }
        });
        if (isValid == false)
            alert('Please fill in missing details');
        else
            alert('Thank you for submitting');
    });

Answer 1

It seems like you're confusing a the dropdown control in Bootstrap with a Select element. The dropdown can be manually configured to behave as a select control, but you'll need to do it yourself.

For starters, you'll want to do any manipulations whenever the links in the dropdown-menu are clicked. You can do that with a delegate event handler like this:

$(".dropdown").on("click", "li a", function() {
    // Handle Clicks Here
});  

Once in there, you can get the text of the currently select anchor like this:

var platform = $(this).text();

Then apply that to whatever other controls you'd like to store that information. If you don't persist it in some way, the dropdown control will have no memory of that option being previously selected . You can add it to the dropdown menu button or to another text field like this:

$("#dropdown_title2").html(platform);
$('#printPlatform').html(platform);

Here's the whole thing in jsFiddle

Update:

If you want to check the value on validation, just check any of the places into which you have persisted the value. If you added it to the screen, you can check it there. If you don't need it to appear anywhere, then you can add it to the dropdown menu as a data attribute. Here's one way you could do that now:

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

If you need something more specific, I'd recommend using this fiddle as a starter template and getting a working example that reproduces the exact issue you're having