Как мне превратить это в обратный вызов, который запускается, когда пользователь изменяет выпадающий список?

ProgramBox

Как мне превратить это в обратный вызов, который запускается, когда пользователь изменяет выпадающий список?

Post author:admin
Запись опубликована:15 марта, 2023
Post category:Вопросы по программированию

#javascript #html #function #callback

#javascript #HTML #функция #обратный вызов

Вопрос:

Я довольно новичок в Javascript и пытаюсь создать свою первую программу.

По сути, программа предоставляет пользователям ряд выпадающих списков, и все их выбранные элементы будут сопоставлены в конце, чтобы сформировать объединенную текстовую строку. Мой оригинальный JSFiddle показывает, что программа корректно работает для одного выпадающего списка, и теперь я пытаюсь переделать его в функцию, чтобы этот процесс можно было повторить для нескольких разных выпадающих списков.

Мой НОВЫЙ 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);

Теперь я хочу напечатать значение, выбранное пользователем, на странице и присвоить ему значение «Окончательный выбор». К сожалению, в нем говорится «Неперехваченная ошибка ссылки: селектор не определен», но я не уверен, как передать ему значение, которое они выбрали.

Я понимаю, что мне нужно сделать это как обратный вызов, который выполняется «при изменении», но я не уверен, как это сделать с помощью основной функции populateSelects .

Любая помощь приветствуется!

Ответ №1:

Вы можете создать функцию и при onchange выбора вы можете вызвать функцию, передав это в качестве аргумента. это указывает на 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>

1. Вау, спасибо за такой быстрый ответ и такое умное решение. Я только что попробовал, и он работает отлично, и я собираюсь изучить ваш код, чтобы убедиться, что я точно понимаю, что происходит в каждой части (хотя я думаю, что я понимаю). Еще раз спасибо!

Ответ №2:

Вы можете создать функцию, в которой вы можете передавать выпадающий элемент и извлекать его значение.

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

И измените свой HTML как :

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

Вы можете использовать эту функцию со всеми другими выпадающими списками.