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

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

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

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

addEventListener("select", addActivityItem, false);

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


javascript dom-events
person NovaDev    schedule 21.07.2014    source источник
comment
Похоже, вы хотите, чтобы он запускал отдельный обработчик onclick, который проверяет количество элементов и, если есть только один, вызывает addActivityItem.   -  person Austin Mullins    schedule 22.07.2014
comment
Думаю, я просто пытаюсь выяснить, какое событие (если оно есть) запускается, когда я нажимаю на элемент выбора, содержащий только один элемент, потому что прямо сейчас те, которые должны срабатывать, не срабатывают.   -  person NovaDev    schedule 22.07.2014
comment
если вы нажмете, будет запущено событие клика. Если вы хотите запустить событие выбора, вы можете явно запустить document.getElementById('activitySelector').click()   -  person Shovan    schedule 22.07.2014

Ответы (2)


arrow_upward
69
arrow_downward

Вам нужен прослушиватель кликов, который вызывает addActivityItem, если существует менее 2 вариантов:

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.

person Austin Mullins    schedule 22.07.2014
comment
Я понял, что ошибка была где-то в другом месте моего кода, и что событие клика — это то, что мне нужно, в конце концов. Это то, что я сделал и думал, так что подтверждение хорошее. Благодарю вас! - person NovaDev; 22.07.2014
comment
в вашем примере ссылка написала changed событие, я думаю должно быть change - person Nabi K.A.Z.; 17.10.2019

arrow_upward
9
arrow_downward

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

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

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

window.addEventListener("load", start, false);
person Jack Daniels    schedule 03.11.2015
comment
Спасибо, у меня это сработало, когда я добавил () к вызову функции в прослушивателе событий, как в ...addEventListener(change, addActivityItem(), false); - person Joe Coyle; 20.07.2018