Question

我正在测试是否可以使用JavaScript将option值放在select元素中，而不是写出忙碌的HTML代码。

最初，当我尝试它时，它开始起作用，但后来从2010年开始，我希望option value拥有 year ，然后我更改了代码，但并没有“行不通，我将其改回原来的状态，仍然不行，然后我反复尝试了一次，但行不通，继续更改代码以查看其在HTML页面上是否有效，但事实并非如此。（但每次更改Chrome浏览器控制台时，效果都很好）。请问我该怎么做才能使其正常工作？

将脚本放置在页面的末尾，它没有用，然后在开始时也尝试了，最后在我选择的id之后尝试了它。都没用。

function yearDate() {
  let mydate = [`<option>Year<option>`],
    number = 2010;
  for (let x = 0; x < 100; x++) {
    mydate.push(`<option>${number}</option>`);
    number -= 1;
  }
  return mydate.join("");
}

let myNewDate = yearDate();

let elYear = document.getElementById("year");
elYear.textContent = myNewDate;

<select id='year'></select>

我正在使用

Bracket版本1.10内部版本1.10.0-17483（版本024bee940）内部版本时间戳记：2017年7月4日星期二23:07:56 GMT-0700

和

Chrome浏览器版本70.0.3538.102（官方内部版本）（64位）测试代码。

该代码可与Javascript控制台配合使用，以输出所需的结果。

尽管我是Java语言和编程的新手。请帮忙解决这个问题。

Answer 1

如果您尝试使用HTML字符串填充选择菜单，则应将elYear.textContent = myNewDate;行更改为elYear.innerHMTL = myNewDate;。

const startDate = 2010;
function yearDate(startYear) {
  let year = startYear;
  let options = `<option>Year<option>`;
  for (let x = 0; x <= 100; x++) {
    options += `<option>${year}</option>`;
    year -= 1;
  }
  return options;
}

let myNewDate = yearDate(startDate);

let elYear = document.getElementById("year");
elYear.innerHTML = myNewDate;
elYear.value = 2010 - 100;

document.getElementById('year').addEventListener('change', function(){
  const value = this.value;
  document.getElementById('selectedyear').innerText = `The value is: ${value}`;
});

<select id='year'></select>
<div id='selectedyear'></div>

.textContent .innerHTML，不更新文本内容，首先处理，然后停止工作

1 个答案: