[英]How to validate length of query chosen multi-select dropdown
我正在研究 jQuery Chosen 多選的驗證部分。 驗證工作正常,我只想在多選下拉列表中允許一個選項。 我正在嘗試獲取多選的length
,但它不起作用。 誰能告訴我該怎么做?
請注意,當我單擊“保存”按鈕時,我想顯示一個alert
,例如“請 select 只有一個選項”。
此外,多選有很多選項,但我的情況是,如果下拉菜單包含多個選項,它應該拋出“僅選擇一個選項”錯誤,如上所述。
$(".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>
更新了代碼。
$(".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();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.