您可以創(chuàng)建一個函數(shù)，并在select 的onchange上調(diào)用該函數(shù)，將其作為參數(shù)傳遞。 this指向調(diào)用該函數(shù)的 html 元素。您可以嘗試以下代碼段。此外，我還對populateSelects進(jìn)行了一些修改，以便能夠在一次調(diào)用中創(chuàng)建所有下拉菜單。
// 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>
