Bootstrap JQuery:对所选项目的下拉菜单验证 [英] Bootstrap JQuery: dropdown menu validation on selected item

问题描述

我有以下twitter引导程序下拉菜单，它是表单的一部分:

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

将该下拉值设置为var，然后使用

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

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

我现在要验证此下拉列表，以检查是否已选择一项，并且默认值"select"已更改.

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

这是我尝试过的:

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');
    });

推荐答案

似乎您将Bootstrap中的dropdown控件与Select元素混淆了.下拉可以手动配置表现为一个选择控制，但你需要自己做.

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.

对于初学者，每当单击dropdown-menu中的链接时，您都希望进行任何操作. 您可以使用类似这样的委托事件处理程序来做到这一点:

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

这是jsFiddle中的全部内容

更新:

如果要在验证时检查值，只需检查将值保留在其中的任何位置.如果将其添加到屏幕，则可以在此处进行检查.如果您不需要它出现在任何地方，则可以将其作为数据属性添加到下拉菜单中.这是您现在可以执行的一种方法:

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

这篇关于Bootstrap JQuery:对所选项目的下拉菜单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！