如何验证选择的多 select 下拉列表的查询长度

Question

我正在研究 jQuery Chosen multi-select 的验证部分。验证工作正常，我只想在 multi-select 下拉列表中允许一个选项。我正在尝试获取 multi-select 的 length 但它不起作用。谁能告诉我怎么做？

请注意，当我单击 'save' 按钮时，我想显示一个 alert，例如 'please select only one option'。

此外，multi-select 有很多选项，但我的情况是，如果下拉列表包含多个选项，它应该抛出 'select one option only' 错误，如上所述。

 $(".chosen-select").chosen(); 
document.getElementById("plvalidate").addEventListener("click", function(event) {
  $("#error_sp_msg_pg, #error_sp_msg_soi, #error_sp_msg_cpsea, #error_sp_msg_cpstag, #error_sp_msg_cpvari").remove();
  var soilone = document.getElementById("soilval").value;
  var cpseason = document.getElementById("seasonval").value;
  var cpstages = document.getElementById("stagval").value;

  if (soilone == "" || soilone == null) {
    //alert("Please select atleset one soil type");
    $(
      "<span/>", {
        "id": "error_sp_msg_soi",
        "html": "Please select atleset one soil type"
      }).insertBefore($("#soilval"));
    event.preventDefault();
  }

  if (cpseason == "" || cpseason == null) {
    //alert("Please select atleset one season");
    $("<span/>", {
      "id": "error_sp_msg_cpsea",
      "html": "Please select season"
    }).insertBefore($("#seasonval"));
    event.preventDefault();
  } else if (cpseason.lenght > 1) {
    alert('please select only one option');
    $("<span/>", {
      "id": "error_sp_msg_cpsea1",
      "html": "Please select only one season"
    }).insertBefore($("#seasonval"));
  }

  if (cpstages == "" || cpstages == null) {
    //alert(""Please select atleset one stage");
    $("<span/>", {
      "id": "error_sp_msg_cpstag",
      "html": "Please select atleset one stage"
    }).insertBefore($("#stagval"));
    event.preventDefault();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

Test :
<select id="soilval" data-placeholder="Select Soil type" class="chosen-select form-control" multiple tabindex="1">
  <option>test1</option>
  <option>test2</option>
  <option>test3</option>
</select>

Test2:
<select id="seasonval" data-placeholder="Select Season" class="chosen-select form-control" multiple tabindex="1">
  <option>Test3</option>
  <option>Test4</option>
  <option>Test5</option>
</select>

Test3
<select id="stagval" data-placeholder="Select Stages" class="chosen-select form-control" multiple tabindex="1">
  <option>Test5</option>
  <option>Test6</option>
  <option>Test7</option>
</select>

<button class="btn btn-primary" id="plvalidate">Save</button>

Answer 1

更新代码。

$(".chosen-select").chosen();

document.getElementById("plvalidate").addEventListener("click", function(event) {
    $("#error_sp_msg_pg, #error_sp_msg_soi, #error_sp_msg_cpsea, #error_sp_msg_cpstag, #error_sp_msg_cpvari").remove();
    var soilone = $("#soilval").val();
    var cpseason = $("#seasonval").val();
    var cpstages = $("#stagval").val();
    console.log("soilone11", soilone);
    if (soilone == "" || soilone == null) {
        alert("Please select atleset one soil type");
        $(
            "<span/>", {
                "id": "error_sp_msg_soi",
                "html": "Please select atleset one soil type"
            }).insertBefore($("#soilval"));

    }
    $("#error_sp_msg_cpsea1").remove();
    if (cpseason == "" || cpseason == null) {
        //alert("Please select atleset one season");
        $("<span/>", {
            "id": "error_sp_msg_cpsea",
            "html": "Please select season"
        }).insertBefore($("#seasonval"));
        event.preventDefault();
    } else if (cpseason.length > 1) {
        alert('please select only one option');
        $("<span/>", {
            "id": "error_sp_msg_cpsea1",
            "html": "Please select only one season"
        }).insertBefore($("#seasonval"));
    }

    if (cpstages == "" || cpstages == null) {
        //alert(""Please select atleset one stage");
        $("<span/>", {
            "id": "error_sp_msg_cpstag",
            "html": "Please select atleset one stage"
        }).insertBefore($("#stagval"));
        event.preventDefault();
    }
});

如何验证选择的多 select 下拉列表的查询长度

How to validate length of query chosen multi-select dropdown

html

javascript

jquery

multi-select

bootstrap-4