javascript - 事件处理程序和 <select> 菜单

Question

我正在使用 Javascript，需要一些帮助 <select> (又名下拉)菜单。

将有一个大约 300 个对象的数组，选择菜单将从中获取其选项。将列出数组中的哪些元素将由其他函数确定，并随着用户的操作而更新，因此选择菜单中的选项名称和数量不会是静态的。我会将当前所选对象的数据显示在页面上。

我的问题是:我需要设置什么类型的事件处理程序(编辑*监听器)才能让页面根据 <select> 中选择的选项更新显示的数据。菜单？我不确定.onfocus是否会为此工作，因为我无法制作 .onfocus <select> 中项目的事件处理程序当时可能不存在的菜单。也许我只是不确定如何.onfocus与 <select> 交互菜单一般。如果有除 .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

如果您使用的是 SELECT 元素(您似乎是这样)，为什么不使用“change”事件，只要用户在菜单中选择一个选项，它就会触发，并且您的事件可以向您发送 event.target .value(这将是当时选择的值)，无论还有哪些其他选项可用。

但是，如果您不使用 SELECT 元素，那就是另一回事了。

您能具体说明一下吗？

编辑

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”时，您的回调函数有一个事件对象作为参数，该对象有一个“target”属性，它是受事件影响的元素，在本例中是您的 SELECT 元素。

因此event.target.value也可以解释为: yourSELECT.value