JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<select multiple id='recipient_userid' size=20>
      <option value='1'>First Option</option>
      <option value='2'>Second Option</option>
      <option value='3'>Third Option</option>
      <option value='4'>Fourth Option</option>
      <option value='5'>Fifth Option</option>
      <option value='6'>Sixth Option</option>
      <option value='7'>Seventh Option</option>
      <option value='8'>Eighth Option</option>
      <option value='9'>Ninth Option</option>
     <option value='10'>Tenth Option</option>
     <option value='11'>First Option</option>
      <option value='12'>Second Option</option>
      <option value='13'>Third Option</option>
      <option value='14'>Fourth Option</option>
      <option value='15'>Fifth Option</option>
      <option value='16'>Sixth Option</option>
      <option value='17'>Seventh Option</option>
      <option value='18'>Eighth Option</option>
      <option value='19'>Ninth Option</option>
      <option value='20'>Tenth Option</option>
</select>

JavaScript

var last_valid_selection = null;
var selected = "";

$("#recipient_userid").change(function(event){
    if ($(this).val().length > 5) {
        alert('You can only choose 5!');
        $(this).val(last_valid_selection);
    } else {
        last_valid_selection = $("#recipient_userid").val();
        $("#recipient_userid option:selected").each(function () {
            selected += "<li>" + $(this).text() + "</li>";
        });
        $("#currentlySelected").html(selected);
        selected = "";
    }
}).change();