Multiselect，Jquery：如果至少应该选择一个选项，请检查我的多项选择

Question

您好，我将总结一下我的问题，希望您能理解。

主要目标：在点击选择按钮之前检查是否至少选择了一个选项。否则，如果在没有选择至少一个选项的情况下单击选择按钮，则会显示“请至少选择一个选项”的消息。

目的：我在其他代码中有理由需要一个选择按钮，而不是仅仅选择多个选择并且不需要按钮。

表格如下所示：

简单的 HTML 代码：

<div class="form-group">
  // My Select Id is monthlymonth

  <label for="monthlymonth" class="col-sm-4 control-label">For the Month Of: </label>
  <div class="col-sm-6" id=monthlymonthdiv>
      <select class="form-control" name="monthlymonth[]" id="monthlymonth" multiple>
          <option> October </option>
          <option> November </option>
          <option> December </option>
      </select>
   </div>

   /My Select button, Id is monthsubmit.
   <input style="text-align:center; width: 60px;" type="button" id="monthsubmit" name="monthsubmit" value="Select">

   <input style="text-align:center; width: 60px;" type="button" id="clear" name="clear" value="Clear">
</div>

现在是我的 JQuery：

$("#monthsubmit").unbind('click').bind('click', function() {
  if (// code that checks if no options is selected at least one)
  {
    alert('Please choose at least one month');
  }
  else
  {
    // my other codes
  }
});

Answer 1

希望这可以帮助你if ($('#monthlymonth').get(0).selectedIndex == -1)

$("#monthsubmit").on('click', function() {
			  if ($('#monthlymonth').get(0).selectedIndex == -1)
			  {
			    alert('Please choose at least one month');
			  }
			  else
			  {
			    // my other codes
			  }
			});

$("#clear").on('click', function() {
				$("#monthlymonth option:selected").removeAttr("selected");
			});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">

  <label for="monthlymonth" class="col-sm-4 control-label">For the Month Of: </label>
  <div class="col-sm-6" id=monthlymonthdiv>
      <select class="form-control" name="monthlymonth[]" id="monthlymonth" multiple>
          <option> October </option>
          <option> November </option>
          <option> December </option>
      </select>
   </div>

   <input style="text-align:center; width: 60px;" type="button" id="monthsubmit" name="monthsubmit" value="Select">

   <input style="text-align:center; width: 60px;" type="button" id="clear" name="clear" value="Clear">
</div>

Answer 2

如果您使用的是 Jquery，检查输入值的最佳方法是使用“val()”函数。 如果未选择任何内容，它将返回 null 值。

这是一个例子：

$("#monthsubmit").unbind('click').bind('click', function() {
  if (!$("#monthlymonthdiv").val())
  {
    alert('Please choose at least one month');
  }
  else
  {
    // my other codes
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">

  <label for="monthlymonth" class="col-sm-4 control-label">For the Month Of: </label>
  <div class="col-sm-6" id=monthlymonthdiv>
      <select class="form-control" name="monthlymonth[]" id="monthlymonth" multiple>
          <option> October </option>
          <option> November </option>
          <option> December </option>
      </select>
   </div>

   <input style="text-align:center; width: 60px;" type="button" id="monthsubmit" name="monthsubmit" value="Select">

   <input style="text-align:center; width: 60px;" type="button" id="clear" name="clear" value="Clear">
</div>

Answer 3

尝试简化版本。

$("#monthsubmit").click(function(){
    if (!$("#monthlymonth option:selected").length) {
        alert('Please choose at least one month');
    }
});

$("#clear").click(function(){
    $("#monthlymonth option:selected").removeAttr("selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">

  <label for="monthlymonth" class="col-sm-4 control-label">For the Month Of: </label>
  <div class="col-sm-6" id=monthlymonthdiv>
      <select class="form-control" name="monthlymonth[]" id="monthlymonth" multiple>
          <option> October </option>
          <option> November </option>
          <option> December </option>
      </select>
   </div>

   <input style="text-align:center; width: 60px;" type="button" id="monthsubmit" name="monthsubmit" value="Select">

   <input style="text-align:center; width: 60px;" type="button" id="clear" name="clear" value="Clear">
</div>