Javascript: обработчики событий & <select> меню

Question

Я работаю с Javascript и нуждаюсь в некоторой помощи с меню (aka drop-down).

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

Мой вопрос заключается в следующем: какой тип настройки обработчика событий (редактировать * прослушиватель) мне нужно, чтобы страница обновляла отображаемые данные в зависимости от того, какая опция выбрана в меню? Я не уверен, что .onfocus будет работать для этого, так как я не могу сделать обработчик события .onfocus для элемента в меню, которое может не существовать в то время ... Возможно, я просто не уверен, как это сделать. onfocus взаимодействует с меню вообще. Если есть какой-то другой обработчик, чем .onfocus, который делает трюк, пожалуйста, дайте мне знать.

//constructor begins 
function Ingredient(params) { 
    this.pic = params.pic; 
    this.name = params.name; 
    this.nameIsKnown = false; 
    this.unrefinedPot = params.unrefinedPot; 
    this.unrefinedPotIsKnown = false; 
    this.refinedPot = params.refinedPot; 
    this.refinedPotIsKnown = false; 
    this.rawQty = 0; 
    this.unrefinedQty = 0; 
    this.refinedQty = 0; 
    this.refineDC = params.refineDC; 
    this.refineDCIsKnown = false; 
    this.properties = [params.prop1, params.prop2, params.prop3, params.prop4]; 
    this.propertyIsKnown = [false, false, false, false]; 
    this.whereFound = []; 
    this.isPoisonous = params.isPoisonous; 
    this.genericDescription = params.genericDescription; 
    this.fullDescription = params.fullDescription; 
} 
//constructor ends 

//prototype stuff begins 
//prototype stuff 
//prototype stuff ends 


//example object literal that gets passed to constructor 
var baconParams = {pic: "bacon.png", 
        name: "Bacon", 
        unrefinedPot: 1, 
        refinedPot: 2, 
        refineDC: 17, 
        prop1: "Juicy", 
        prop2: "Crispy", 
        prop3: "Smokey", 
        prop4: "Burnt", 
        isPoisonous: false, 
        genericDescription: "Unidentified animal part.", 
        fullDescription: "This is a pig meat product that comes in strips. It is usually fried until crispy and eaten for breakfast."}; 

var masterArray = []; 

function fillList() { 
    for (i = 0; i < masterArray.length; i++) { 
     var current = masterArray[i]; 
     var itemName = current.name; 
     var option = document.createElement("option"); 
     option.innerHTML = itemName; 
     var select = document.getElementById("testselect"); 
     select.appendChild(option); 
    } 
} 


var bacon = new Ingredient(baconParams); 
masterArray.push(bacon); 
//this is the part you gave me 
document.getElementById("testselect").addEventListener("change", callback, true); 

function callback(event) { 
    //e.preventDefault(); 
    //e.stopPropagation(); 
    var value = event.target.value; 
    var text = document.getElementById("testp"); 
    text.innerHTML = value; 
} 

fillList(); 

Answer 1

Если вы используете ВЫБЕРИТЕ элемент (который вы, кажется), то почему бы не использовать «изменение», оно будет запускать каждый раз, когда пользователь выбирает опцию в меню и ваше мероприятие может отправить вы event.target.value (который будет значением выбора в это время) независимо от того, какие другие варианты доступны.

Если вы НЕ используете элемент SELECT, однако, это совсем другая история.

Не могли бы вы указать, если вы находитесь?

EDIT

document.getElementById('yourselectelementsid').addEventListener('change', callback, true); 

function callback(event) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    var value = event.target.value; 

    // do stuff 
} 

Вся информация вам нужно в MDN events page По существу, когда вы «addEventListener» ваши функции обратного вызова есть объект события в качестве параметра, который имеет «цель» свойство, которое является элементом, затронутым событием, в этом случае ваш элемент SELECT.

Так event.target.value, также может быть истолковано как: yourSELECT.value