事件处理程序和<选择>菜单

Event handlers and <select> menus

本文关键字：选择 gt 菜单 lt 程序 事件处理      更新时间：2023-09-26

我正在使用Javascript，需要一些关于<select>（又称下拉菜单）的帮助。

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

我的问题是：我需要什么类型的事件处理程序设置（edit*listener）来让页面根据在<select>菜单中选择的选项更新正在显示的数据？我不确定.onfocus是否适用于此，因为我无法为<select>菜单中当时可能不存在的项目创建.onfocus 事件处理程序。也许我只是不确定.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();

如果您正在使用SELECT元素（看起来是这样），为什么不使用"更改"事件呢？每当用户在菜单中选择一个选项时，它就会触发，并且您的事件可以向您发送event.target.value（此时将是SELECT的值），而不考虑其他可用选项。

然而，如果您没有使用SELECT元素，那就另当别论了。

你能具体说明一下你是不是？

编辑

document.getElementById('yourselectelementsid').addEventListener('change', callback, true);
function callback(event) {
  e.preventDefault();
  e.stopPropagation();
  var value = event.target.value;
  // do stuff
}

您需要的所有信息都在MDN事件页面中本质上，当您"addEventListener"时，回调函数将一个事件对象作为参数，该对象具有一个"target"属性，该属性是受事件影响的元素，在本例中是SELECT元素。

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

相关文章：