jQuery If Dropdown UL Is Unselected

Question

It's very straightforward to use jQuery to determine if a text input field is empty, e.g.:

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

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

But what if you need a user to select a value from a <ul> dropdown menu and trigger something if that dropdown remains unselected? I've tried the following:

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

Also:

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

Neither approach works. What's the correct one?

You should research the use of checkboxes/radio buttons and labels for this. Give it a try and post your attempt. note: there are ... a lot of ways to solve this... but start with researching checkboxes/radio buttons and labels. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) — nstanard, Jan 29 '19 at 19:51
Both checkboxes and radio buttons can have an attribute of `checked` (and/or a jQuery element of `:checked`) which is not the case with `
` dropdowns. You're generous if mistaken to assume I have not researched this matter -- I've indicated two examples I've tried based on that research. — jimiayler, Jan 29 '19 at 20:05
So... are you trying to claim that you can't use a list ... and radio buttons together? I'm not seeing sufficient work to assume anything else other than you don't understand the fundamentals of what HTML to use for allowing users to select items from a list. — nstanard, Jan 29 '19 at 20:06
Excuse me, "attitude"? You're the one who is somewhat less generously assuming I don't know the fundamentals of HTML and downvoted me for no reason beyond your own distemper. I've edited my example to demonstrate the full button element. — jimiayler, Jan 29 '19 at 20:19
Have you tried getting rid of the tags and using radio elements instead? I'd like to see you make an attempt at that before getting defensive. — nstanard, Jan 29 '19 at 20:32
it's even more interesting that a simple google search turned up: https://stackoverflow.com/questions/32172950/use-li-to-select-radio-input All I did was google "unordered list radio buttons" and that was one of the first links. Yet you said you did a lot of research... so I'm not sure what to believe. — nstanard, Jan 29 '19 at 20:58
Conversely, I'm finding it easier by the minute to believe any number of things. I'm not looking to use radio buttons in what is an already working element. Thanks all the same. — jimiayler, Jan 29 '19 at 21:08
Have you looked at jQuery UI Menu? http://jqueryui.com/menu/ For this case, I would advise adding a class to the `li` when selected. In this way, you could then find the `.selected` item. — Twisty, Jan 29 '19 at 22:18
You could also use a `data` attribute on the parent `ul`. When an item is selected, `$(this).parent().data("value", $(this).text());` You can then later check this: `if($(".dropdown-menu").data("value") == "")` — Twisty, Jan 29 '19 at 22:22

score 0 · Answer 1 · answered Jan 29 '19 at 22:34

Here is one example you might consider.

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

Now, if you need form elements, try this example.

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

Now you have a complete custom look and form element that will validate.

Hope that helps.

jQuery If Dropdown UL Is Unselected

1 Answers1