javascript - 根据JS中的选择值动态更新锚的href

Question

当关联的下拉列表更新为不同的值时，我想更新锚按钮的 href 值。我尝试更改菜单项，但我收到一条错误消息，告诉我所选列表项的值未定义，即使在开始时已定义值。即使提交默认值也不起作用。如果有人可以帮助我解决我做错的事情，那将不胜感激。

我正在尝试开始工作的HTML div示例（页面上有几个像这样的 div，这就是为什么我在 JS 中使用类列表而不是 ID 的原因）：

        <div class="yearcontainer catalogue">
          <h2>CCRC 2017 Meeting Minutes</h2>
          <div class="listgui">
              <label for="2017input">Select from the 2017 list: </label>
              <select id="2017input" class="dropdowns" name="2017input">
                <option value="files/2017/010417.pdf">January 4, 2017</option>
                <option value="files/2017/010417 Budget Workshop.pdf">January 4, 2017 Workshop</option>
                <option value="files/2017/020317.pdf">February 3, 2017</option>
                <option value="files/2017/021517.pdf">February 15, 2017</option>
                <option value="files/2017/030117.pdf">March 1, 2017</option>
                <option value="files/2017/040517.pdf">April 5, 2017</option>
                <option value="files/2017/041917.pdf">April 19, 2017</option>
                <option value="files/2017/050317 rev.pdf">May 3, 2017</option>
                <option value="files/2017/060717.pdf">June 7, 2017</option>
                <option value="files/2017/070517.pdf">July 5, 2017</option>
                <option value="files/2017/080217.pdf">August 2, 2017</option>
                <option value="files/2017/090617.pdf">September 6, 2017</option>
                <option value="files/2017/092717.pdf">September 27, 2017</option>
                <option value="files/2017/100317 Workshop.pdf">October 3, 2017 Workshop</option>
                <option value="files/2017/110117.pdf">November 1, 2017</option>
                <option value="files/2017/120617.pdf">December 6, 2017</option>
              </select>
              <a href="" class="onpagelink" target="_blank">Go..</a>
          </div>
        </div>

以及相关的JS：

var linkButtons = document.querySelectorAll(".onpagelink");
var linkDropDowns = document.querySelectorAll(".dropdowns");



for(i=0; i<linkDropDowns.length; i++) {
    linkDropDowns[i].addEventListener("change", function() {
        linkButtons[i].href = linkDropDowns[i].value;
    });
}

标签： javascripthtml