jQuery, если выпадающий UL не выбран

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>

Теперь у вас есть полный пользовательский вид и элемент формы, который будет проверяться.

Надеюсь, что это поможет.