javascript - PHP+jQuery 阻止我的选择元素更新

Question

我使用 PHP 显示 1940 年和当前年份之间的年份，并使用 foreach 循环呈现 select 元素内的每个 option 。一切都按计划进行，直到我将一个 id 添加到 select 元素中，jquery block 会在该元素中查找更改。

本质上，我正在尝试 console.log (目前)选择任何 option 的值，但有关我的 jQuery/PHP 的某些内容正在停止 select 显示所选选项。 console.log 按预期工作，但所选选项不会在元素中更新。它总是返回显示默认选项，即 2018 年，因为它是当前年份。

如果我将 PHP foreach 选择/选项更改为纯 HTML 的静态下拉列表，它就可以正常工作。同样，如果我断开 jQuery 但保留 PHP 动态生成的 option 列表，则它可以正常工作。我的 PHP+jQuery 组合阻止了 select 更新，我不知道是什么。

这是我的 HTML/PHP 代码:

<select name="birthyear" id="birthyear">
  <?php
    // $years is setting the range from current year to 1940
    $years = range(date('Y'), 1940);
    foreach ($years as $year) {
      echo "<option id='$year' value='$year'>".$year."</option>";
    }
  ?>
</select>

这是我的 jQuery:

$('#birthyear').on('change', function() {
  var date = new Date();
  var year = date.getFullYear();
  var yearsOld = year - $(this).val();

  console.log(yearsOld + " years old.");

  if (yearsOld >= 18) {
    console.log("age >= 18")
  } else {
    console.log("You aren't old enough!");
  }
});

我在这里遗漏了什么吗？

Answer 1

你的代码工作正常...我所做的就是执行 PHP 来获取 HTML，然后将其插入 JSFiddle。

我认为你的问题是你没有正确包含 jQuery。

<select name="birthyear" id="birthyear">
    <option id='2018' value='2018'>2018</option>
    <option id='2017' value='2017'>2017</option>
    <option id='2016' value='2016'>2016</option>
    <option id='2015' value='2015'>2015</option>
    <option id='2014' value='2014'>2014</option>
    <option id='2013' value='2013'>2013</option>
    <option id='2012' value='2012'>2012</option>
    <option id='2011' value='2011'>2011</option>
    <option id='2010' value='2010'>2010</option>
    <option id='2009' value='2009'>2009</option>
    <option id='2008' value='2008'>2008</option>
    <option id='2007' value='2007'>2007</option>
    <option id='2006' value='2006'>2006</option>
    <option id='2005' value='2005'>2005</option>
    <option id='2004' value='2004'>2004</option>
    <option id='2003' value='2003'>2003</option>
    <option id='2002' value='2002'>2002</option>
    <option id='2001' value='2001'>2001</option>
    <option id='2000' value='2000'>2000</option>
    <option id='1999' value='1999'>1999</option>
    <option id='1998' value='1998'>1998</option>
    <option id='1997' value='1997'>1997</option>
    <option id='1996' value='1996'>1996</option>
    <option id='1995' value='1995'>1995</option>
    <option id='1994' value='1994'>1994</option>
    <option id='1993' value='1993'>1993</option>
    <option id='1992' value='1992'>1992</option>
    <option id='1991' value='1991'>1991</option>
    <option id='1990' value='1990'>1990</option>
    <option id='1989' value='1989'>1989</option>
    <option id='1988' value='1988'>1988</option>
    <option id='1987' value='1987'>1987</option>
    <option id='1986' value='1986'>1986</option>
    <option id='1985' value='1985'>1985</option>
    <option id='1984' value='1984'>1984</option>
    <option id='1983' value='1983'>1983</option>
    <option id='1982' value='1982'>1982</option>
    <option id='1981' value='1981'>1981</option>
    <option id='1980' value='1980'>1980</option>
    <option id='1979' value='1979'>1979</option>
    <option id='1978' value='1978'>1978</option>
    <option id='1977' value='1977'>1977</option>
    <option id='1976' value='1976'>1976</option>
    <option id='1975' value='1975'>1975</option>
    <option id='1974' value='1974'>1974</option>
    <option id='1973' value='1973'>1973</option>
    <option id='1972' value='1972'>1972</option>
    <option id='1971' value='1971'>1971</option>
    <option id='1970' value='1970'>1970</option>
    <option id='1969' value='1969'>1969</option>
    <option id='1968' value='1968'>1968</option>
    <option id='1967' value='1967'>1967</option>
    <option id='1966' value='1966'>1966</option>
    <option id='1965' value='1965'>1965</option>
    <option id='1964' value='1964'>1964</option>
    <option id='1963' value='1963'>1963</option>
    <option id='1962' value='1962'>1962</option>
    <option id='1961' value='1961'>1961</option>
    <option id='1960' value='1960'>1960</option>
    <option id='1959' value='1959'>1959</option>
    <option id='1958' value='1958'>1958</option>
    <option id='1957' value='1957'>1957</option>
    <option id='1956' value='1956'>1956</option>
    <option id='1955' value='1955'>1955</option>
    <option id='1954' value='1954'>1954</option>
    <option id='1953' value='1953'>1953</option>
    <option id='1952' value='1952'>1952</option>
    <option id='1951' value='1951'>1951</option>
    <option id='1950' value='1950'>1950</option>
    <option id='1949' value='1949'>1949</option>
    <option id='1948' value='1948'>1948</option>
    <option id='1947' value='1947'>1947</option>
    <option id='1946' value='1946'>1946</option>
    <option id='1945' value='1945'>1945</option>
    <option id='1944' value='1944'>1944</option>
    <option id='1943' value='1943'>1943</option>
    <option id='1942' value='1942'>1942</option>
    <option id='1941' value='1941'>1941</option>
    <option id='1940' value='1940'>1940</option>
</select>

https://jsfiddle.net/gpfh150g/