Question

我正在使用jui的ui-datepicker日历，并且尝试仅在当日上午10点之前隐藏以下选项的元素：option：nth-child（2）：

<select name="delivery_time_frame" id="delivery_time_frame" class="select " data-allow_clear="true" data-placeholder="Choose a time of delivery ">                          
  <option value="">Choose a time of delivery </option>
  <option value="time_frame:0">12:00 – 14:00</option>
  <option value="time_frame:1">14:00 – 16:00</option>
  <option value="time_frame:2">16:00 – 18:00</option>
  <option value="time_frame:3">18:00 – 20:00</option>                       
</select>

通过使用查询选择器：

document.querySelector("#delivery_time_frame > option:nth-child(2)")

例如，如果时间仅在当天10:00 am之前，我想隐藏第一个选项。如果有人在日历中选择了当前日期以外的日期，我不想隐藏。例如，如果在日期选择器日历中选择了第二天，则我不会隐藏该元素；我希望它可见以供选择。

这一点是，如果有人选择在日历中交付同一天，我希望除了第一个以外的所有可用选项（从14:00到20:00）。如果选择其他任何一天交付，我希望所有选项可用。

感谢您的帮助！

Answer 1

对于您所遇到问题的确切情况，我不太清楚。根据提供的信息，您似乎希望根据某些情况显示DDL的不同选项。解决这种问题的方法可能很少：

根据使用的业务逻辑动态地准备选项一些循环（例如：for循环）。然后将其分配给Select（DDL / Drop Down 列表控件）。
使用静态选项显示DDL，并添加/删除类以显示/隐藏使用功能来控制选项的显示。
使用静态选项准备多个DDL并显示合适的DDL为需要。这不是推荐的方法，而只是解决方法。

如果我误解了您的问题，请提供一个屏幕快照，描述事件的顺序和预期的结果。

Answer 2

您应该发布一个最少的示例作为代码，以便其他人可以尽可能轻松地重现您的问题。我已经模拟了一些支持的东西，可能不是您所拥有的，但足以作为示例。

我将禁用该选项，而不是将其隐藏，以便用户知道该选项在那里，只是在他们选择的日期不可用（出现这种情况的消息也可能有帮助）。

必须有一个关联的日期选择才能知道用户选择了哪个日期才能启用或禁用该选项。该元素需要一个侦听器来修改时间选择中的选项，例如

// Helpers
function formatDate(date) {
  let z = n=>(n<10?'0':'')+n;
  return `${date.getFullYear()}-${z(date.getMonth()+1)}-${z(date.getDate())}`;
}
function parseISOLocal(s) {
  let [y,m,d] = s.split('-');
  return new Date(y, --m, d);
}

// Hide option if before 10 am today
function checkSelected() {
  // Get today's date
  let today = new Date();
  // Get date formatted for comparision with value in select
  let todayStamp = formatDate(today);
  // Get selected date
  let selectedDate = this.value; //document.getElementById('delivery_date').value
  // Get target option
  let opt = document.querySelector('#delivery_time_frame > option:nth-child(2)');
  // If it's today and before 10, hide option
  if (selectedDate == todayStamp && today.getHours() < 10) {
    console.log('disable ' + opt.value);
    opt.disabled = true;
    // Deselect in case it's been selected
    opt.selected = false;
  } else {
    opt.disabled = false;
    console.log('enable ' + opt.value);
  }
}

window.onload = function(){
  // Insert some dates in delivery_date
  let now = new Date();
  let select = document.getElementById('delivery_date');
  for (let i=0; i<3; i++) {
    let d = formatDate(now);
    select.appendChild(new Option(d, d));
    now.setDate(now.getDate() + 1);
  }
  // Attach listener on select
  let sel = document.querySelector('#delivery_date');
  if (sel) {
    sel.addEventListener('change', checkSelected, false);
  }
};

<select name="delivery_date" id="delivery_date">
  <option selected>Select a delivery date
</select>
<select name="delivery_time_frame" id="delivery_time_frame" class="select " data-allow_clear="true" data-placeholder="Choose a time of delivery ">                          
  <option value="" selected>Choose a time of delivery </option>
  <option value="time_frame:0">12:00 – 14:00</option>
  <option value="time_frame:1">14:00 – 16:00</option>
  <option value="time_frame:2">16:00 – 18:00</option>
  <option value="time_frame:3">18:00 – 20:00</option>                   
</select>

它还需要处理用户是否已经选择了一个时间（由于我不知道您还需要实现什么逻辑，因此在上面没有尝试过）。

您还可以在用户选择日期之前禁用时间选择。

根据当前日期的时间隐藏元素

2 个答案: