Выберите "X" вариантов, используя html, JS

$(function() {
  // Get references to the different select elements and convert
  // them into Arrays:
  var pizzaSelect =
    Array.prototype.slice.call(
      document.querySelectorAll("#pizzaOptions > option"));
  var sodaSelect =
    Array.prototype.slice.call(
      document.querySelectorAll("#soda > option"));
  
  // Loop over each list's options, executing the supplied 
  // callback function for each one.
  pizzaSelect.forEach(checkSelectionCount);
  sodaSelect.forEach(checkSelectionCount);
  
  function checkSelectionCount(opt, idx, ary){
    // Add a click event listener to each option:
    opt.addEventListener("click", function(event){
      // Is a 3rd option clicked and being selected?
      if (this.parentNode.selectedOptions.length === 3 && this.selected) { 
        this.selected = false; // De-select it.
      }
    });
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id = "pizzaOptions">
      <option value = "cheese">Cheese</option>
      <option value = "pepperoni">Pepperoni</option>
      <option value = "sausage">Sausage</option>
      <option value = "mushrooms">Mushrooms</option>
    </select>
<br><br>
<select multiple id = "soda">
      <option value = "coke">Coke</option>
      <option value = "sprite">Sprite</option>
      <option value = "dr_pepper">Dr. Pepper</option>
</select>