如何使用jQuery为日期下拉选项添加星期显示？

没问题，我来帮你实现这个需求！你的原代码里有几个小细节需要调整，我先帮你梳理问题，再给出完整的解决方案。

原代码的问题分析 #

1. DOM选择器错误：document.getElementsByTagName('.date option') 用法不对，getElementsByTagName只接受标签名（比如option），不能用CSS选择器。如果要用选择器，应该用document.querySelectorAll('.date option')，不过用jQuery会更简洁。
2. 没有正确获取星期：<option>元素本身没有getDay()方法，这个方法是Date对象的专属方法。你需要先把option的value属性（也就是日期字符串）转换成Date对象，再调用getDay()。
3. 星期数字转名称：getDay()返回的是0-6的数字（0=周日，6=周六），需要把这些数字映射成对应的英文星期名称。

完整的jQuery解决方案 #

下面是修正后的代码，我会把jQuery逻辑和你的HTML整合在一起：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>
  </select>
</div>

<script>
$(function() {
  // 定义星期名称数组，索引对应getDay()的返回值（0=周日）
  const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  
  // 遍历所有.date下的option元素
  $('.date option').each(function() {
    // 获取当前option的value属性（日期字符串）
    const dateStr = $(this).val();
    // 转换成Date对象
    const date = new Date(dateStr);
    // 获取对应的星期名称
    const dayName = weekDays[date.getDay()];
    // 把星期名称和原文本拼接，更新显示内容
    $(this).text(`${dayName} ${$(this).text()}`);
  });
});
</script>

代码说明 #

1. DOM加载就绪：$(function(){...}) 是$(document).ready()的简写，确保DOM完全加载后再执行代码，避免找不到元素的问题。
2. 星期名称数组：weekDays数组的索引和getDay()返回的数字一一对应，方便直接获取星期的英文名称。
3. 遍历与更新：用.each()遍历每个option，获取日期、转换为Date对象、拼接星期和原文本，最后用.text()更新显示内容。

这样运行后，你的下拉框里的选项就会变成类似Sunday February 2, 2020的格式啦！

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