Question

我正在使用Javascript并需要一些帮助（也称为下拉菜单）。

将有一个大约300个对象的数组，从中可以选择菜单。将列出阵列中的哪些元素将由其他功能确定，在用户执行操作时更新，因此选择菜单中的选项名称和数量将不是静态的。我将在页面上显示当前所选对象的数据。

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

如果您正在使用SELECT元素（您似乎是这样），为什么不使用＆＃34;更改＆＃34;当用户在菜单中选择一个选项并且您的事件可以向您发送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中基本上，当你＆＃34; addEventListener＆＃34;你的回调函数有一个事件对象作为参数，它有一个＆＃34; target＆＃34; property，它是受事件影响的元素，在本例中是SELECT元素。

所以 event.target.value ，也可以解释为：的 yourSELECT.value

Javascript：事件处理程序＆amp; <select>菜单</select>

1 个答案: