主页 / coding / 问题 / 79161544
Accepted
user28155802
Asked: 2024-11-06 14:36:23 +0800 CST

通过单击取消选择某项

  • 772

有一个下拉式多选，我想在其中单击一个元素以将其从选定元素中删除。开箱即用的 chosen.js 显然无法做到这一点，您如何对其进行一些修改？

我尝试将标准函数绑定到元素，但没有成功。请给我提示

$("body").on("click", ".result-selected", function() {
    let index = $(this).attr("data-option-array-index");
    let container = $(this).closest(".chosen-container");
    let select = container.prev();
    
    if ( select != null && select.hasClass("chosen-select") ) {
        console.log(index);
        select
            .find("option:eq(" + index + ")")
            .prop("selected", false);
        select.trigger("chosen:updated").trigger('chosen:open');
    }
});
javascript

1 个回答

  1. Best Answer

    在原始代码中，您在取消选择后触发了 chosen:open。这可能并不总是按预期运行，因为如果在取消选择时关闭了下拉菜单，则可能不希望在取消选择后立即打开它。在大多数情况下，您会希望在进行更改后关闭下拉菜单，而不是重新打开它。

    1. 在所选的选定元素上绑定点击事件。
    2. 在select元素中查找对应的选项。
    3. 从该选项中删除选定的属性。
    4. 更新所选的下拉菜单并触发必要的事件。

    工作片段：

    $(function() {
    // Initialize Chosen with options
    $(".chosen-select").chosen({
        width: "100%",
        allow_single_deselect: false,
        disable_search: true,
        hide_results_on_select: false,
    });

    // Event listener for clicking a selected item to deselect
    $("body").on("click", ".result-selected", function() {
        let index = $(this).attr("data-option-array-index"); // Get the index of the selected option
        let container = $(this).closest(".chosen-container"); // Find the container of the chosen dropdown
        let select = container.prev(); // Get the original select element

        if (select != null && select.hasClass("chosen-select")) {
            // Check if dropdown is open before deselecting
            let isDropdownOpen = container.hasClass("chosen-with-drop");

            // Find the corresponding option element in the select by index
            let option = select.find("option").eq(index);

            if (option.length) {
                // Deselect the option (remove 'selected' attribute)
                option.prop("selected", false);

                // Temporarily disable Chosen's internal closing behavior
                select.trigger("chosen:updated");

                // If the dropdown was open before deselecting, we keep it open manually
                if (isDropdownOpen) {
                    // Manually re-open the dropdown if it's closed after deselecting
                    setTimeout(function() {
                        select.trigger("chosen:open");
                    }, 10); // Small delay to allow update to complete before reopening
                    return false;
                }
            }
        }
    });

    // Handle item click to ensure dropdown opens again after deselection
    $("body").on("click", ".chosen-select", function() {
        let select = $(this);
        let container = select.next(".chosen-container");

        // If the dropdown is not open, we open it
        if (!container.hasClass("chosen-with-drop")) {
            select.trigger("chosen:open");
        }
    });

    // Prevent the dropdown from closing when updating
    $(document).on("chosen:updated", ".chosen-select", function() {
        let select = $(this);
        let container = select.next(".chosen-container");

        // If the dropdown is open, we reopen it
        if (container.hasClass("chosen-with-drop")) {
            setTimeout(function() {
                select.trigger("chosen:open");
            }, 10);
        }
    });
});
    .box{
  width:300px;
  margin:50px;
}

.chosen-container{
  position: relative;
}
.chosen-single{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 24px;
    border: none;
    outline: none;
    background-color: #FAFAFB;
    font-size: 14px;
    line-height: 24px;
    min-height: 48px;
    text-decoration: none;
    color:#02013D;
    position: relative;
    cursor: pointer;
    font-weight: 400;

    b{
      width: 16px;
      height: 16px;
      position: absolute;
      top: 16px;
      right: 16px;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10L8 6L12 10' stroke='%2302013D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 
      transform: rotate(180deg);
      transition: transform .3s linear;

      .chosen-with-drop &{
        transform: rotate(0);
      }
    }
}
.chosen-drop{
  // display: none;
    margin-top: 4px;

    background-clip: padding-box;
    position: absolute;
    top: 100%;
    z-index: 1010;
    width: 100%;
    border-top: 0;
    background: #FAFAFB;
   
    clip: rect(0, 0, 0, 0);
    -webkit-clip-path: inset(100% 100%);
            clip-path: inset(100% 100%);

  .chosen-with-drop &{
    clip:auto;
    -webkit-clip-path: none;
    clip-path: none;
  }
}
.chosen-search{
  display: none;
}
.chosen-results{
  margin: 0;
  list-style: none;
  padding: 6px 12px;
  li{
    padding: 6px 0px;
    color:#02013D;
    font-size: 14px;
    cursor: pointer;
  }
}

.chosen-default{
  color:#81809E;
}

.chosen-container-multi{

  list-style: none;
    margin: 0;
    padding: 0;
    // align-items: center;
    width: 100%;
    padding-right: 34px;
    border: none;
    outline: none;
    background-color: #FAFAFB;
    font-size: 14px;
    line-height: 24px;
    min-height: 48px;
    text-decoration: none;
    color: #02013D;
    position: relative;
    cursor: pointer;
    font-weight: 400;
    height: 48px;
  
    &::after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 16px;
      right: 16px;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10L8 6L12 10' stroke='%2302013D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
      transform: rotate(180deg);
      transition: transform .3s linear;
  
  
    }

  .chosen-choices{
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 12px 0px 12px 24px;

    li{
      &:last-child{
        display: none;
      }
      &:first-child{
        display: inline-block;
      }
    }
    

    input{
      border:none;
      background-color: transparent;
      font-size: 14px;
      color:#02013D;
      outline:none;
    }

    .search-field{
      // display: none;
    }
    .chosen-search-input{
      display: none;
    }
    .search-choice{
      display: inline-block;
      margin-right: 8px;
      position: relative;
      padding-right: 12px;
      flex-shrink: 0;
     
      .search-choice-close{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 1L1 13M1 1L13 13' stroke='%2302013D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-position: top right;
        background-repeat: no-repeat;
      }
    }
  }

  &.chosen-with-drop .chosen-choices:after {
    transform: rotate(0);
  }

  .chosen-results{

    .active-result, .result-selected{
      position: relative;
      padding-left: 28px;
      &:before{
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform:translateY(-50%);
        width: 16px;
        height: 16px;
        border:1px solid #02013D;
      }
    }
    .result-selected{
      &:after{
        content:'';
        position: absolute;
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background-color: #886B3E;
      }
    }
    
  }
}

.chosen-drop {
    margin-top: 4px;
    background-clip: padding-box;
    position: absolute;
    top: 100%;
    z-index: 1010;
    width: 100%;
    border-top: 0;
    background: #FAFAFB;
    clip: auto; /* Ensure it's visible */
    -webkit-clip-path: none;
    clip-path: none;
}

.chosen-container .chosen-with-drop .chosen-drop {
    clip-path: none; /* When dropdown is open, clip-path should be removed */
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="box">

 <select name="size" class="chosen-select" multiple data-placeholder="Select size" >
   <option value=""></option>
   <option value="40">40 mm</option>
   <option value="36">36 mm</option>
   <option value="26">26 mm</option>
   <option value="41">41 mm</option>
   <option value="34">34 mm</option>
  </select>

</div>

    • 0

相关问题