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

我现在希望验证此下拉列表以检查项目是否已被选中且默认值为＆＃34;选择＆＃34;已经变了。

这是我尝试的内容：

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

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

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

1 个答案:

Here's the whole thing in jsFiddle

更新