Bootstrap Jquery: Dropdown Menu Validation On Selected Item

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

Platform

Solution 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

Share