javascript - Bootstrap JQuery : dropdown menu validation on selected item

Question

我有以下 Twitter Bootstrap 下拉菜单，它是表单的一部分:

<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 元素混淆了。可以手动配置下拉列表以充当选择控件，但您需要自己进行配置。

对于初学者来说，每当单击下拉菜单中的链接时，您都需要执行任何操作。您可以使用委托(delegate)事件处理程序来做到这一点，如下所示:

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

进入后，您可以获得当前选择的 anchor 的文本，如下所示:

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

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