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

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

 Platform: 
 
  Select   
 
Android
 
IOS
 
Windows Phone
 
 
 
  

一旦页面加载，那么当用户选择一个项目我使用它

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

将下拉值设置为var，然后使用在模式中显示它

我现在要validation此下拉列表以检查项目是否已被选中并且“select”的默认值已更改。

这是我尝试过的：

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

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

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

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

这是jsFiddle中的全部内容

更新：

如果要检查validation值，只需检查您持久保存值的任何位置。 如果您将其添加到屏幕上，则可以在那里进行检查。 如果您不需要它出现在任何地方，则可以将其作为数据属性添加到下拉菜单中。 这是你现在可以做到的一种方式：

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

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