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

Проблемът е, че сте използвали опцията избор, тук сте сбъркали. Избор означава, че текстово поле или textArea има фокус. Това, което трябва да направите, е да използвате промяна. „Задейства се, когато се направи нов избор в избран елемент“, използва се също като замъгляване при отдалечаване от текстово поле или textArea.

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