AddEventListener, "изменение" и выбор опции

Я пытаюсь, чтобы динамический список выбора заполнялся сам, начиная с одного выбора:

<select id="activitySelector">
      <option value="addNew">Add New Item</option>
</select>

а затем код JavaScript у нас есть:

addEventListener("select", addActivityItem, false);

Проблема в том, что различные события не запускаются, когда у вас есть один элемент: не "изменить", потому что текст не меняется при выборе этого элемента; не "выбирать" (как у меня здесь), по примерно схожей причине, потому что я на самом деле ничего не выбираю, потому что есть только один элемент. Какое событие должно быть запущено здесь? Кажется глупым перечислять пустой элемент в моем списке опций для запуска события, поэтому я надеюсь, что есть другое решение. Или это лучшее решение?

Ответ 1

Вам нужно событие click, чтобы обработать описанное вами поведение.

Сначала проверьте, существует ли несколько вариантов.

Если нет, вызовите функцию addActivityItem.

Следующий фрагмент демонстрирует, как этого можно достичь:

var activities = document.getElementById("activitySelector");

activities.addEventListener("click", function() {
    var options = activities.querySelectorAll("option");
    var count = options.length;
    if(typeof(count) === "undefined" || count < 2)
    {
        addActivityItem();
    }
});

activities.addEventListener("change", function() {
    if(activities.value == "addNew")
    {
        addActivityItem();
    }
});

function addActivityItem() {
    // ... Code to add item here
}

Демонстрационная версия здесь, на JSfiddle.

Ответ 2

Проблема заключается в том, что вы использовали опцию select, вот где вы поступили не так. Выбрать означает, что в текстовом поле или в textArea есть фокус. Что вам нужно сделать, это использовать change. "Пожары, когда новый выбор сделан в элементе выбора", также используется как размытие при удалении от текстового поля или текстового сообщения.

function start(){
      document.getElementById("activitySelector").addEventListener("change", addActivityItem, false);
      }

function addActivityItem(){
      //option is selected
      alert("yeah");
}

window.addEventListener("load", start, false);