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

debugcn 发表于 Dev

Baggerz

我有以下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 />

我现在正在寻找验证此下拉列表的方法，以检查是否已选择一项，并且默认值“ select”已更改。

这是我尝试过的：

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

凯尔·米特

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

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

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

进入该目录后，您可以像这样获取当前选择的锚文本：

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

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

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。