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

编程问答 2022-06-11

问题描述

我对Java语言还很陌生，正在尝试制作我的第一个程序。

该程序从本质上为用户提供了一系列下拉框，他们的选择将全部整理到最后以形成一个连接的文本字符串。 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：未定义选择器””，但我不确定如何将他们选择的值传递给它。

我了解我需要作为“在更改时发生”的回调来执行此操作，但不确定如何使用主要populateSelects函数执行此操作。

感谢您的帮助！

解决方法

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

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

并将HTML更改为：

<select id="progressDropdown" onchange="printSelected(this)">
        <option>Progress Dropdown</option>
    </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>

callbackcallbackfunctionfunctionfunctionhtmljavascript