从选择下拉菜单中触发 jquery 函数答案

【问题标题】：Trigger jquery function from select dropdown从选择下拉菜单中触发 jquery 函数
【发布时间】：2023-03-05 19:08:01
【问题描述】：

这应该很容易，但是过去三个小时我一直在绕圈子...我知道我应该更改 SELECT 的 ID 以匹配 jquery 函数的 ID，但是还有一步（显然）我错过了。

我正在使用 jqueryui 日期选择器，我只是希望它在使用“选择”下拉菜单选择特定值时弹出，而不是在单击“输入”字段时弹出。这是代码，提前感谢您的帮助：

    <SELECT id="">
        <option value="1">TODAY</option>
        <option value="2">TOMORROW</option>
        <option selected value="3">THIS WEEK</option>
        <option value="4">NEXT WEEK</option>
        <option value="5">THIS MONTH</option>
        <option value="6">NEXT MONTH</option>
        <option value="7">CALENDAR SHOULD POP UP WHEN THIS OPTION IS SELECTED</option>
    </SELECT>

<input type="text" id="datepicker" value="INSTEAD OF THIS">

  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
      minDate: 0, maxDate: "+2Y"
    });
  } );
  </script>

【问题讨论】：

有问题的网站是：s-on.ch

标签： jquery jquery-ui datepicker

【解决方案1】：

当然，您可以将更改处理程序绑定到选择元素并触发datepicker's show method，例如：

$('select').change(function() {
  if ($(this).val() == 7) {
    $("#datepicker").datepicker("show")
  }
})

jsFiddle example

【讨论】：

哇，谢谢一百万！我想我现在将隐藏 #datepicker 输入 onpageload。

【解决方案2】：

是的，你可以做这样的事情。 switch() 将帮助确定在下拉列表中选择特定选项时要做什么，然后他们可以告诉 .datepicker() 要做什么。

$(function() {
  $("#datepicker").datepicker({
    minDate: 0,
    maxDate: "+2Y"
  }).hide();
  $("#select-date").change(function(e) {
    if ($(this).val() == "7") {
      $("#datepicker").show().datepicker("show");
    } else {
      $("#datepicker").datepicker("hide").hide();
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<SELECT id="select-date">
  <option value="1">TODAY</option>
  <option value="2">TOMORROW</option>
  <option selected value="3">THIS WEEK</option>
  <option value="4">NEXT WEEK</option>
  <option value="5">THIS MONTH</option>
  <option value="6">NEXT MONTH</option>
  <option value="7">CALENDAR</option>
</SELECT>
<input type="text" id="datepicker">

如果您有兴趣，现在您也可以使用组合框或拆分按钮来执行此操作。为了更好地适应网站，您可以考虑：

$(function() {
  var $datepick = $("#datepicker"),
    $opt7 = $("#select-date option[value='7']");
  $datepick.datepicker({
    minDate: 0,
    maxDate: "+2Y",
    onSelect: function(sDate, dObj) {
      $opt7.html(sDate);
      $datepick.hide();
    }
  }).hide();
  $opt7.click(function(e) {
    $datepick.show().position({
      my: "left top",
      at: "right top",
      of: $("#select-date")
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<SELECT id="select-date">
      <option value="1">TODAY</option>
      <option value="2">TOMORROW</option>
      <option selected value="3">THIS WEEK</option>
      <option value="4">NEXT WEEK</option>
      <option value="5">THIS MONTH</option>
      <option value="6">NEXT MONTH</option>
      <option value="7">CHOOSE DATE</option>
    </SELECT>
<div id="datepicker"></div>

【讨论】：