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

Question

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

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

一旦页面被加载，然后当用户选择一个项目时，我会使用它

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

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

在模式中显示它

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

我现在正在寻找验证此下拉菜单以检查是否已选择项目并且“选择”的默认值已更改。

这是我尝试过的：

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

但是，当代码运行时，不会显示警告对话框。有谁知道我哪里出错了？

文本框的当前验证（下拉验证将添加到此方法中）

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

您似乎将 Bootstrap 中的 dropdown 控件与 Select 元素混淆了。下拉菜单可以手动配置为选择控件，但您需要自己做。

对于初学者，只要单击dropdown-menu 中的链接，您就需要进行任何操作。 您可以使用这样的委托事件处理程序来做到这一点：

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

在那里，您可以像这样获取当前选择的锚点的文本：

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

然后将其应用于您想要存储该信息的任何其他控件。如果您不以某种方式保留它，下拉控件将​​不记得该选项之前选择。您可以将其添加到下拉菜单按钮或其他文本字段，如下所示：

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

Here's the whole thing in jsFiddle

更新：

如果您想在验证时检查值，只需检查您已将值保存到的任何位置。如果您将其添加到屏幕上，您可以在那里查看。如果您不需要它出现在任何地方，那么您可以将它作为数据属性添加到下拉菜单中。这是您现在可以做到的一种方法：

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

如果您需要更具体的内容，我建议您使用此小提琴作为入门模板并获取一个可以重现您遇到的确切问题的工作示例