如何将其转换为在用户更改下拉框时触发的回调？

Question

我是 Javascript 的新手，正在尝试制作我的第一个程序。

该程序实质上为用户提供了一系列下拉框，他们的选择将在最后进行整理以形成一个连接的文本字符串。 My original JSFiddle 显示该程序对一个下拉框工作正常，我现在正尝试将其重新编写为一个函数，以便可以对多个不同的下拉框重复此过程。

My NEW JSFiddle 表明我现在已将代码重写为函数，并接受两个参数（categoryOptions - 用于填充选择框的不同数组）和（selector - 实际选择在 HTML 文档中定位）。

// Step 4 - Function which will print the selected value into the content HTML element
// Need helping turning this into a callback for the function above.
// I want this function to run but only when the select box is changed.
function printSelection() {
    var finalSelection = selector.value;
    console.log(document.getElementById("content").innerHTML = finalSelection);
}

}

populateSelects (progressOptions, progressSelector);

我现在想将用户选择的值打印到页面，并赋值给'finalSelection'。不幸的是它说 'Uncaught ReferenceError: selector is not defined"' 但我不确定如何将他们选择的值传递给它。

我知道我需要将此作为回调执行，它会发生 'on change' 但我不确定如何使用主 populateSelects 函数执行此操作。

感谢任何帮助！

Answer 1

您可以创建一个函数，在其中传递下拉元素并提取其值。

function printSelected(element){
     document.getElementById("content").innerHTML = element.value;
}

并将您的 HTML 更改为：

<select id="progressDropdown" onchange="printSelected(this)">
        <option>Progress Dropdown</option>
    </select>

您可以将此功能与所有其他下拉菜单一起使用。

Answer 2

您可以创建一个函数，然后在 select 的 onchange 上，您可以调用传递 this 作为参数的函数。 this 指向调用该函数的 html 元素。您可以尝试以下代码段。我还修改了 populateSelects 一点，以便能够在一次调用中创建所有下拉菜单。

// Step 1 - Store Strings to be passed to categoryOptions Parameter
let progressOptions = ["Just testing!", "XX has made excellent progress", "XX has made good progress", "XX has made poor progress"];
// Behaviour Options
let behaviourOptions = ["XX has excellent behaviour", "XX has good behaviour", "XX has poor behaviour"];
// Attendance Options
let attendanceOptions = ["XX has excellent attendance", "XX has good attendance", "XX has poor attendance"];
// Punctuality Options
let punctualityOptions = ["XX has excellent punctuality", "XX has good punctuality", "XX has poor punctuality"];
// Improvement Options
let improvementsOptions = ["XX should carry on as they have", "XX could make some improvements", "XX must improve"];

// Step 2 - Target the ID; objects to be used in the select below.

let dropDownConfig = [{
    id: "progressDropdown",
    categoryOptions: progressOptions
  },
  {
    id: "behaviourDropdown",
    categoryOptions: behaviourOptions
  },
  {
    id: "attendanceDropdown",
    categoryOptions: attendanceOptions
  },
  {
    id: "punctualityDropdown",
    categoryOptions: punctualityOptions
  },
  {
    id: "improvementsDropdown",
    categoryOptions: improvementsOptions
  },
]

// Step 3 - For Loop Passing the Values from progressOptions as option elements in HTML

function populateSelects(dropDownConfig) {
  for (let di = 0; di < dropDownConfig.length; di++) {
    for (let i = 0; i < dropDownConfig[di].categoryOptions.length; i++) {
      let opt = dropDownConfig[di].categoryOptions[i];

      let el = document.createElement("option");
      el.text = opt;
      el.value = opt;

      document.getElementById(dropDownConfig[di].id).add(el);
    }
  }
}
// Step 4 - Function which will print the selected value into the content HTML element
// Need helping turning this into a callback for the function above.
// I want this function to run but only when the select box is changed.
function printSelection(e) {

  document.getElementById("content").innerHTML+=  e.value+' ';
}

populateSelects(dropDownConfig);

<body>
  <select id="progressDropdown" onchange="printSelection(this)">
    <option>Progress Dropdown</option>
  </select>
  <select id="behaviourDropdown" onchange="printSelection(this)">
    <option>Behaviour Dropdown</option>
  </select>
  <select id="attendanceDropdown" onchange="printSelection(this)">
    <option>Attendance Dropdown</option>
  </select>
  <select id="punctualityDropdown" onchange="printSelection(this)">
    <option>Punctuality Dropdown</option>
  </select>
  <select id="improvementsDropdown" onchange="printSelection(this)">
    <option>Improvements Dropdown</option>
  </select>
  <div id="content"></div>
</body>

如何将其转换为在用户更改下拉框时触发的回调？

How do I turn this into a callback that triggers when a user changes the dropdown box?

html

javascript

function

callback