Question

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

这两种方法均无效。正确的是什么？

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

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

希望有帮助。

jQuery如果未选择下拉UL

1 个答案: