Select2日期下拉自定义选项连续点击无法打开问题修复求助

使用Select2实现日期下拉选择时，首次点击「Custom Range（自定义范围）」选项能正常弹出自定义日期面板，但连续点击该选项时无响应，必须先点击其他选项再返回点击它才能重新唤起面板。

原因分析 #

1. Select2中已选中的选项再次点击时，不会触发select2:select事件，导致连续点击「Custom Range」时没有执行面板显示逻辑
2. 每次点击「Custom Range」都重复初始化jQuery Datepicker，造成冗余操作且可能干扰事件触发

修复方案 #

核心修改点 #

• 在select2:open事件中重置下拉框选中值，确保每次点击「Custom Range」都能触发select2:select
• 将Datepicker初始化移到页面加载阶段，避免重复绑定
• 移除HTML选项中的onclick属性，统一通过Select2事件处理逻辑

修改后的完整代码 #

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="date-range-selector">
  <div class="drop-header-date">Date Range</div>
  <select id="date-range-options" style="width: 200px;">
    <option></option>
    <option value="week">Week</option>
    <option value="month">Month</option>
    <option value="year">Year</option>
    <option value="custom">Custom Range</option>
  </select>
  <div class="selectedDateContainer">
    <span class="startdate-box">Start Date<span id='startDate-text'></span></span>
    <span class="enddate-box"><span>End Date</span><span id='endDate-text'></span></span>
  </div>
  <div id="custom-range">
    <div class="custom-range-datepick">
      <div id="start-date-container" class="datepicker">
        <label for="start-date">Start Date:</label><span id="startdateText"></span>
      </div>
      <div id="end-date-container" class="datepicker">
        <label for="end-date">End Date:</label><span id="enddateText"></span>
      </div>
    </div>
    <div id="btn-block" style="margin-top: 8px; margin-bottom:5px; text-align: right; font-size: 14px;">
      <button id="reset-btn-date" style="display: inline-block;">Reset</button>
      <button id="cancel-btn-date" style="display: inline-block;">Cancel</button>
      <button id="apply-btn-date" style="display: inline-block;">Apply</button>
    </div>
  </div>
</div>

CSS

#custom-range {
    z-index: 99999;
    position: absolute;
    display: none;
    background-color: #fff;
    padding: 10px 2px 5px 2px;
    border: 1px solid #000;
}

JavaScript

$(document).ready(function() {
  // 初始化Select2
  $("#date-range-options").select2({
    placeholder: "Select",
    minimumResultsForSearch: -1,
    closeOnSelect: false,
    allowClear: false
  });

  // 提前初始化Datepicker，避免重复绑定
  $("#start-date-container").datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function(selectedDate) {
      const startDateText = selectedDate;
      $("#end-date-container").datepicker("option", "minDate", selectedDate);
      $('#startdateText').text(startDateText);
      $('#startDate-text').text(startDateText);
      console.log("Start Date:", startDateText);
    }
  });

  $("#end-date-container").datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function(selectedDate) {
      const endDateText = selectedDate;
      $("#start-date-container").datepicker("option", "maxDate", selectedDate);
      $('#enddateText').text(endDateText);
      $('#endDate-text').text(endDateText);
      console.log("End Date:", endDateText);
    }
  });

  // 下拉框打开时重置选中值，清除面板状态
  $("#date-range-options").on('select2:open', function() {
    $(this).val("").trigger('change');
    $("#custom-range").hide();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $('.selectedDateContainer').hide();
  });

  // 选中选项时的处理逻辑
  $("#date-range-options").on('select2:select', function() {
    const selectedValue = $(this).val();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $('.selectedDateContainer').hide();

    if (selectedValue === "custom") {
      $("#custom-range").show();
      $("#btn-block").show();
      $(".custom-range-datepick").show().addClass('flex-important').removeClass('hidden-important');
      $("#date-range-options").select2('close');
    } else {
      $("#btn-block").hide();
      $("#custom-range").hide();
      $(".custom-range-datepick").removeClass('flex-important').hide().addClass('hidden-important');
      getFilterDataAward();
    }
  });

  // 初始状态设置
  $("#custom-range").hide();
  $("#date-range-options").val("").trigger('change');

  // 应用按钮点击事件
  $("#apply-btn-date").click(function() {
    const selectedOption = $("#date-range-options").val();
    if (selectedOption === "custom") {
      $("#date-range-options").select2('close');
      $("#custom-range").hide();
      getFilterDataAward();
      $('.selectedDateContainer').show();
    } else {
      $('.selectedDateContainer').hide();
    }
  });

  // 取消按钮点击事件
  $("#cancel-btn-date").click(function() {
    $("#custom-range").hide();
    $("#date-range-options").val("").trigger('change');
    $("#startdateText").text("");
    $("#enddateText").text("");
    $("#date-range-options").select2('open');
    // 重置过滤请求（如果需要）
    filterRequest = filterRequest || {};
    filterRequest.startDate = null;
    filterRequest.endDate = null;
  });

  // 重置按钮点击事件
  $("#reset-btn-date").click(function() {
    $("#custom-range").hide();
    $("#date-range-options").val("").trigger('change');
    $("#startdateText").text("");
    $("#enddateText").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $(".selectedDateContainer").hide();
  });
});

function getFilterDataAward() {
  console.log("calls api");
}

修复效果 #

修改后，无论连续点击多少次「Custom Range」选项，自定义日期面板都能正常弹出，同时优化了Datepicker的初始化逻辑，避免重复绑定问题。

内容的提问来源于stack exchange，提问作者sd_30