时间戳

首页 > 解决方案 > 即使您未选中，在页面加载时显示第一个选项的数组

javascript - 即使您未选中，在页面加载时显示第一个选项的数组

问题描述

我有一个带有多个复选框的下拉菜单。当我加载页面时，即使没有选中复选框，数组也已经包含第一个选项。我一直试图找出问题所在，但我被卡住了。页面加载时不应向数组中添加任何值。任何人都可以帮忙吗？

$(document).ready(function(){
 
/*****when page load run this js****/
 var dataarray = [];
 /*********Check which option is checked***********/                
 $("#service option").each(function(){
 if($(this).is(":checked"))
        {dataarray.push($(this).val());}    
   }); 
                    
   dataarray = dataarray.toString(); 
    alert(dataarray);         

/*********************convert select into multiselect************************/
$("#service").CreateMultiCheckBox({ width: '300px', defaultText : 'Select Below', height:'auto' }); 

/**********************creating of checkboxes for each select option************************/
 $(document).on("click", ".MultiCheckBox", function () {
                var detail = $(this).next();
                detail.show();
            });

            $(document).on("click", ".MultiCheckBoxDetailHeader input", function (e) {
                e.stopPropagation();
                var hc = $(this).prop("checked");
                $(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", hc);
                $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
            });

            $(document).on("click", ".MultiCheckBoxDetailHeader", function (e) {
                var inp = $(this).find("input");
                var chk = inp.prop("checked");
                inp.prop("checked", !chk);
                $(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", !chk);
                $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
            });

            $(document).on("click", ".MultiCheckBoxDetail .cont input", function (e) {
                e.stopPropagation();
                $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();

                var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
                $(".MultiCheckBoxDetailHeader input").prop("checked", val);
            });

            $(document).on("click", ".MultiCheckBoxDetail .cont", function (e) {
                var inp = $(this).find("input");
                var chk = inp.prop("checked");
                inp.prop("checked", !chk);

                var multiCheckBoxDetail = $(this).closest(".MultiCheckBoxDetail");
                var multiCheckBoxDetailBody = $(this).closest(".MultiCheckBoxDetailBody");
                multiCheckBoxDetail.next().UpdateSelect();

                var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
                $(".MultiCheckBoxDetailHeader input").prop("checked", val);
            });

            $(document).mouseup(function (e) {
                var container = $(".MultiCheckBoxDetail");
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    container.hide();
                }
            });
        });

        var defaultMultiCheckBoxOption = { width: '220px', defaultText: 'Select Below', height: '200px' };

        jQuery.fn.extend({
            CreateMultiCheckBox: function (options) {

                var localOption = {};
                localOption.width = (options != null && options.width != null && options.width != undefined) ? options.width : defaultMultiCheckBoxOption.width;
                localOption.defaultText = (options != null && options.defaultText != null && options.defaultText != undefined) ? options.defaultText : defaultMultiCheckBoxOption.defaultText;
                localOption.height = (options != null && options.height != null && options.height != undefined) ? options.height : defaultMultiCheckBoxOption.height;

                this.hide();
                this.attr("multiple", "multiple");
                var divSel = $("<div class='MultiCheckBox'>" + localOption.defaultText + "<span class='k-icon k-i-arrow-60-down'><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='sort-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-2x'><path fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z' class=''></path></svg></span></div>").insertBefore(this);
                divSel.css({ "width": localOption.width });

                var detail = $("<div class='MultiCheckBoxDetail'><div class='MultiCheckBoxDetailHeader'><input type='checkbox' class='mulinput' value='-1982' /><div>Select All</div></div><div class='MultiCheckBoxDetailBody'></div></div>").insertAfter(divSel);
                detail.css({ "width": parseInt(options.width) + 10, "max-height": localOption.height });
                var multiCheckBoxDetailBody = detail.find(".MultiCheckBoxDetailBody");

                this.find("option").each(function () {
                    var val = $(this).attr("value");

                    if (val == undefined)
                        val = '';

                    multiCheckBoxDetailBody.append("<div class='cont'><div><input type='checkbox' class='mulinput' value='" + val + "' /></div><div>" + $(this).text() + "</div></div>");
                });

                multiCheckBoxDetailBody.css("max-height", (parseInt($(".MultiCheckBoxDetail").css("max-height")) - 28) + "px");
            },
            UpdateSelect: function () {
                var arr = [];

                this.prev().find(".mulinput:checked").each(function () {
                    arr.push($(this).val());
                });

                this.val(arr).change();
            },

});
.MultiCheckBox {
            border:1px solid #e2e2e2;
            padding: 5px;
            border-radius:4px;
            cursor:pointer;
            background:#ffffff;
        }

        .MultiCheckBox .k-icon{ 
            font-size: 15px;
            float: right;
            font-weight: bolder;
            margin-top: -7px;
            height: 10px;
            width: 14px;
            color:#787878;
        } 

        .MultiCheckBoxDetail {
            display:none;
            position:absolute;
            border:1px solid #e2e2e2;
            overflow-y:hidden;
            background:#ffffff;
        }

        .MultiCheckBoxDetailBody {
            overflow-y:scroll;
        }

            .MultiCheckBoxDetail .cont  {
                clear:both;
                overflow: hidden;
                padding: 2px;
            }

            .MultiCheckBoxDetail .cont:hover  {
                background-color:#cfcfcf;
            }

            .MultiCheckBoxDetailBody > div > div {
                float:left;
            }

        .MultiCheckBoxDetail>div>div:nth-child(1) {
        
        }

        .MultiCheckBoxDetailHeader {
            overflow:hidden;
            position:relative;
            height: 28px;
            background-color:#3d3d3d;
        }

            .MultiCheckBoxDetailHeader>input {
                position: absolute;
                top: 4px;
                left: 3px;
            }

            .MultiCheckBoxDetailHeader>div {
                position: absolute;
                top: 5px;
                left: 24px;
                color:#fff;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="service" class="service" id="service">
  <option value="CONSTRUCTION">Construction</option>
  <option value="HCL">HCL</option>
  <option value="MANUFACTURING">Manufacturing</option>
  <option value="MYE">MYE</option>
  <option value="RSS">RSS</option>
  <option value="SERVICE">SERVICE</option>
  <option value="NA">NA</option>
</select>

标签： javascriptjquery

解决方案

非倍数select总是有值的问题，如果没有选择/checked那么它是第一个值。

在许多情况下，这可以通过添加<option value=""></option>（即空白选项）来缓解，$("select").val() === "")直到选择了一个选项。

在您的情况下，您可以通过确保在获取值的第一段代码运行之前select是 a来解决此问题。multiple="multiple" 

<select name="service" class="service" id="service" multiple="multiple">

或者，在转换之前不要检查该值，并且在转换期间调用您的UpdateSelect（在您的代码添加 之后multiple=multiple）

$(document).ready(function() {

  /*****when page load run this js****/
  var dataarray = [];
  /*********Check which option is checked***********/
  $("#service option").each(function() {
    if ($(this).is(":checked")) {
      dataarray.push($(this).val());
    }
  });

  dataarray = dataarray.toString();
  alert(dataarray);

  /*********************convert select into multiselect************************/
  $("#service").CreateMultiCheckBox({
    width: '300px',
    defaultText: 'Select Below',
    height: 'auto'
  });

  /**********************creating of checkboxes for each select option************************/
  $(document).on("click", ".MultiCheckBox", function() {
    var detail = $(this).next();
    detail.show();
  });

  $(document).on("click", ".MultiCheckBoxDetailHeader input", function(e) {
    e.stopPropagation();
    var hc = $(this).prop("checked");
    $(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", hc);
    $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
  });

  $(document).on("click", ".MultiCheckBoxDetailHeader", function(e) {
    var inp = $(this).find("input");
    var chk = inp.prop("checked");
    inp.prop("checked", !chk);
    $(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", !chk);
    $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
  });

  $(document).on("click", ".MultiCheckBoxDetail .cont input", function(e) {
    e.stopPropagation();
    $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();

    var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
    $(".MultiCheckBoxDetailHeader input").prop("checked", val);
  });

  $(document).on("click", ".MultiCheckBoxDetail .cont", function(e) {
    var inp = $(this).find("input");
    var chk = inp.prop("checked");
    inp.prop("checked", !chk);

    var multiCheckBoxDetail = $(this).closest(".MultiCheckBoxDetail");
    var multiCheckBoxDetailBody = $(this).closest(".MultiCheckBoxDetailBody");
    multiCheckBoxDetail.next().UpdateSelect();

    var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
    $(".MultiCheckBoxDetailHeader input").prop("checked", val);
  });

  $(document).mouseup(function(e) {
    var container = $(".MultiCheckBoxDetail");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      container.hide();
    }
  });
});

var defaultMultiCheckBoxOption = {
  width: '220px',
  defaultText: 'Select Below',
  height: '200px'
};

jQuery.fn.extend({
  CreateMultiCheckBox: function(options) {

    var localOption = {};
    localOption.width = (options != null && options.width != null && options.width != undefined) ? options.width : defaultMultiCheckBoxOption.width;
    localOption.defaultText = (options != null && options.defaultText != null && options.defaultText != undefined) ? options.defaultText : defaultMultiCheckBoxOption.defaultText;
    localOption.height = (options != null && options.height != null && options.height != undefined) ? options.height : defaultMultiCheckBoxOption.height;

    this.hide();
    this.attr("multiple", "multiple");
    var divSel = $("<div class='MultiCheckBox'>" + localOption.defaultText + "<span class='k-icon k-i-arrow-60-down'><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='sort-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-2x'><path fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z' class=''></path></svg></span></div>").insertBefore(this);
    divSel.css({
      "width": localOption.width
    });

    var detail = $("<div class='MultiCheckBoxDetail'><div class='MultiCheckBoxDetailHeader'><input type='checkbox' class='mulinput' value='-1982' /><div>Select All</div></div><div class='MultiCheckBoxDetailBody'></div></div>").insertAfter(divSel);
    detail.css({
      "width": parseInt(options.width) + 10,
      "max-height": localOption.height
    });
    var multiCheckBoxDetailBody = detail.find(".MultiCheckBoxDetailBody");

    this.find("option").each(function() {
      var val = $(this).attr("value");

      if (val == undefined)
        val = '';

      multiCheckBoxDetailBody.append("<div class='cont'><div><input type='checkbox' class='mulinput' value='" + val + "' /></div><div>" + $(this).text() + "</div></div>");
    });

    multiCheckBoxDetailBody.css("max-height", (parseInt($(".MultiCheckBoxDetail").css("max-height")) - 28) + "px");
  },
  UpdateSelect: function() {
    var arr = [];

    this.prev().find(".mulinput:checked").each(function() {
      arr.push($(this).val());
    });

    this.val(arr).change();
  },

});
.MultiCheckBox {
  border: 1px solid #e2e2e2;
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
  background: #ffffff;
}

.MultiCheckBox .k-icon {
  font-size: 15px;
  float: right;
  font-weight: bolder;
  margin-top: -7px;
  height: 10px;
  width: 14px;
  color: #787878;
}

.MultiCheckBoxDetail {
  display: none;
  position: absolute;
  border: 1px solid #e2e2e2;
  overflow-y: hidden;
  background: #ffffff;
}

.MultiCheckBoxDetailBody {
  overflow-y: scroll;
}

.MultiCheckBoxDetail .cont {
  clear: both;
  overflow: hidden;
  padding: 2px;
}

.MultiCheckBoxDetail .cont:hover {
  background-color: #cfcfcf;
}

.MultiCheckBoxDetailBody>div>div {
  float: left;
}

.MultiCheckBoxDetail>div>div:nth-child(1) {}

.MultiCheckBoxDetailHeader {
  overflow: hidden;
  position: relative;
  height: 28px;
  background-color: #3d3d3d;
}

.MultiCheckBoxDetailHeader>input {
  position: absolute;
  top: 4px;
  left: 3px;
}

.MultiCheckBoxDetailHeader>div {
  position: absolute;
  top: 5px;
  left: 24px;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="service" class="service" id="service" multiple="multiple">
  <option value="CONSTRUCTION">Construction</option>
  <option value="HCL">HCL</option>
  <option value="MANUFACTURING">Manufacturing</option>
  <option value="MYE">MYE</option>
  <option value="RSS">RSS</option>
  <option value="SERVICE">SERVICE</option>
  <option value="NA">NA</option>
</select>

推荐阅读