如何将其转换为在用户更改下拉框时触发的回调？
我是 Javascript 的新手，正在尝试制作我的第一个程序。
该程序实质上为用户提供了一系列下拉框，他们的选择将在最后进行整理以形成一个连接的文本字符串。我原来的 JSFiddle显示该程序对一个下拉框工作正常，我现在正试图将其重新编写为一个函数，以便可以对多个不同的下拉框重复此过程。
我的 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''但我不确定如何将他们选择的值传递给它。
我知道我需要将此作为回调执行，它会在“更改时”发生，但我不确定如何使用主 populateSelects 函数执行此操作。
任何帮助表示赞赏！
吃鸡游戏浏览 114回答 2
2回答
-
30秒到达战场
您可以创建一个函数，并在select 的onchange上调用该函数，将其作为参数传递。 this指向调用该函数的 html 元素。您可以尝试以下代码段。此外，我还对populateSelects进行了一些修改，以便能够在一次调用中创建所有下拉菜单。// Step 1 - Store Strings to be passed to categoryOptions Parameterlet progressOptions = ["Just testing!", "XX has made excellent progress", "XX has made good progress", "XX has made poor progress"];// Behaviour Optionslet behaviourOptions = ["XX has excellent behaviour", "XX has good behaviour", "XX has poor behaviour"];// Attendance Optionslet attendanceOptions = ["XX has excellent attendance", "XX has good attendance", "XX has poor attendance"];// Punctuality Optionslet punctualityOptions = ["XX has excellent punctuality", "XX has good punctuality", "XX has poor punctuality"];// Improvement Optionslet 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 HTMLfunction 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> -
沧海一幻觉
您可以创建一个函数，您可以在其中传递下拉元素并提取其值。function printSelected(element){ document.getElementById("content").innerHTML = element.value; }并将您的 HTML 更改为：<select id="progressDropdown" onchange="printSelected(this)"> <option>Progress Dropdown</option> </select>您可以将此功能与所有其他下拉菜单一起使用。
随时随地看视频慕课网APP
相关分类
JavaScript