如果再次单击，select2 日期自定义选项将不会打开

Question

$(document).ready(function() {

  ///dateee picker 
  $("#date-range-options").select2({
    placeholder: "Select",
    minimumResultsForSearch: -1,
    closeOnSelect: false,
    allowClear: false
  });

  $("#date-range-options").on('select2:open', function() {
    $("#custom-range").hide();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
  })

  $("#date-range-options").on('select2:select', function() {
    console.log("date cal", $(this).val())
    selectedDateOpt = $(this).val();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $('.selectedDateContainer').hide();
    if ($(this).val() === "custom") {
      console.log("date inside", $(this).val())
      $("#custom-range").show();
      $("#btn-block").show();
      $(".custom-range-datepick").show().addClass('flex-important');
      $(".custom-range-datepick").removeClass('hidden-important');
      $("#date-range-options").select2('close');
      $("#start-date-container").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
          startDateText = '';
          startDateText = selectedDate;
          console.log("selecteddd end", startDateText)
          $("#end-date-container").datepicker("option", "minDate", selectedDate);
          document.getElementById('startdateText').innerHTML = startDateText
          document.getElementById('startDate-text').innerHTML = startDateText
          console.log("Start Date:", startDateText);
        }
      });

      $("#end-date-container").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
          endDateText = "";
          endDateText = selectedDate;
          console.log("selecteddd end", endDateText)
          $("#start-date-container").datepicker("option", "maxDate", selectedDate);
          document.getElementById('enddateText').innerHTML = endDateText
          document.getElementById('endDate-text').innerHTML = endDateText
          console.log("Custom Range Selected:");
          console.log("End Date:", endDateText);
        }
      });
    } else {
      $('.selectedDateContainer').hide();
      $("#btn-block").hide()
      console.log("date outside", $(this).val())
      $("#custom-range").hide();
      $(".custom-range-datepick").removeClass('flex-important');
      $(".custom-range-datepick").hide().addClass('hidden-important');
      getFilterDataAward();

    }
  });
  $("#custom-range").hide();
  $("#date-range-options").val("").trigger('change');

  $("#apply-btn-date").click(function() {
    console.log("inside apply btn")
    const selectedOption = $("#date-range-options").val();
    console.log("selectedOpy", selectedOption)
    if (selectedOption === "custom") {
      $("#date-range-options").select2('close');
      $("#custom-range").hide();
      getFilterDataAward();
      $('.selectedDateContainer').show();
    } else {
      console.log("Selected Option:", selectedOption);
      $('.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.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 {
            z-index: 99999;
            position: absolute;
            display: none;
            background-color: #fff;
            padding: 10px 2px 5px 2px;
            border: 1px solid #000;
        }

<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">
<!-- Include Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Include Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.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" onclick="getFilterDataAward()">Week</option>
    <option value="month" onclick="getFilterDataAward()">Month</option>
    <option value="year" onclick="getFilterDataAward()">Year</option>
    <option value="custom" onclick="getFilterDataAward()">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>

我正在使用 select2 库来实现日期下拉列表，但存在以下问题：如果连续一次又一次单击自定义选项，则自定义日期不会打开。 例如，如果我第一次单击自定义日期选项，它会打开，但第二次不会打开。如果我单击任何其他选项，然后再次单击它。它打开了。如何修复它。无论我是否连续单击它，我都想以同样的方式工作。这是我的工作代码片段供您参考

Answer 1

正如您在下面的事件监听器中看到的，每当用户选择新选项时就会触发“select2:select”。在您的情况下，连续选择“自定义范围”将不会触发该事件。尝试选择“自定义范围”，然后选择另一个（例如年份），然后再次选择“自定义范围”，您将看到日期模式将弹出，因为“select2：select”已被触发。

$("#date-range-options").on('select2:select', function() {}

按照您的代码，要解决该问题，请尝试在选择“自定义范围”时清除所选选项值。因此，每当用户重新选择相同的选项（自定义范围）时， select2:select 就会被触发，因为 select 的值之前已被清除。

if ($(this).val() === "custom") {

  // Clearing selected value
  $( this ).val( '' ); 

  console.log("date inside", $(this).val())
  $("#custom-range").show();
  $("#btn-block").show(); 

希望这有帮助。