jQuery 如果下拉 UL 未选中答案

【问题标题】：jQuery If Dropdown UL Is UnselectedjQuery 如果下拉 UL 未选中
【发布时间】：2019-01-29 19:49:20
【问题描述】：

使用jQuery判断文本输入框是否为空非常简单，例如：

<input type="text" name="is-exemption-1" value="">

var exemptnum = $(this).find("input[name^=is-exemption]");
if ($(exemptnum).val().length == 0) {
   console.log('Success!');
}

但是，如果您需要用户从<ul> 下拉菜单中选择一个值并在该下拉菜单保持未选中状态时触发某些内容，该怎么办？我尝试了以下方法：

<div class="btn-group">
   <a class="btn btn-default">Select ADC</a>
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" name="is-reviewer-1" role="menu" required="">
      <li><a>Joe Reviewer, LANL</a></li>
      <li><a>Jane Reviewer, LANL</a></li>
      <li><a>Other</a></li>
   </ul>
</div>

var reviewname = $(this).find("input[name^=is-reviewer]");
if (reviewname.selectedIndex == 0) {
     console.log('yay!');
}

还有：

if ($(reviewname).val().length == 0) {
     console.log('dude!');
}

这两种方法都不起作用。哪个是正确的？

【问题讨论】：

您应该为此研究复选框/单选按钮和标签的使用。试一试并发布您的尝试。注意：有很多方法可以解决这个问题...但首先要研究复选框/单选按钮和标签。 (developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
复选框和单选按钮都可以具有checked 的属性（和/或:checked 的jQuery 元素），而<ul> 下拉菜单则不然。如果误以为我没有研究过这个问题，你会很慷慨——我已经指出了我根据该研究尝试过的两个例子。
那么...您是在声称您不能同时使用列表...和单选按钮吗？除了您不了解用于允许用户从列表中选择项目的 HTML 的基本原理之外，我没有看到足够的工作来假设其他任何事情。
你看过 jQuery UI 菜单吗？ jqueryui.com/menu 对于这种情况，我建议在选中时向li 添加一个类。这样，您就可以找到.selected 项。
您还可以在父 ul 上使用 data 属性。当一个项目被选中时，$(this).parent().data("value", $(this).text());你可以稍后检查这个：if($(".dropdown-menu").data("value") == "")

标签： jquery html validation

【解决方案1】：

这是一个你可以考虑的例子。

$(function() {
  $(".dropdown-toggle").click(function() {
    $(this).next().show();
  });
  $(".dropdown-menu li").click(function() {
    var v = $(this).text().trim()
    $(this).parent().data("value", v);
    $(this).parent().hide();
    $(this).closest(".btn-group").find("a:eq(0)").html(v);
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-group">
  <a class="btn btn-default">Select ADC</a>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
   </button>
  <ul class="dropdown-menu" name="is-reviewer-1" role="menu" required="">
    <li><a>Joe Reviewer, LANL</a></li>
    <li><a>Jane Reviewer, LANL</a></li>
    <li><a>Other</a></li>
  </ul>
</div>

现在，如果你需要表单元素，试试这个例子。

$(function() {
  $(".dropdown-toggle").click(function() {
    $(this).next().show();
  });
  $(".dropdown-menu li").click(function() {
    var v = $(this).text().trim()
    $(this).closest(".btn-group").find("[name='is-reviewer']").val(v);
    $(this).parent().hide();
    $(this).closest(".btn-group").find("a:eq(0)").html(v);
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-group">
  <a class="btn btn-default">Select ADC</a>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
   </button>
  <ul class="dropdown-menu" name="is-reviewer-1" role="menu" required="">
    <li><a>Joe Reviewer, LANL</a></li>
    <li><a>Jane Reviewer, LANL</a></li>
    <li><a>Other</a></li>
  </ul>
  <input type="hidden" id="is-reviewer" name="is-reviewer" value="">
</div>

现在您有了一个完整的自定义外观和表单元素，可以验证。

希望对您有所帮助。

【讨论】：