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

我正在使用Javascript，需要有关

（又称下拉菜单）菜单的帮助

将有一个大约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();

//构造函数开始
功能成分（参数）{
this.pic=params.pic；
this.name=params.name；
this.nameisnown=false；
this.unrefinedPot=参数s.unrefinedPot；
this.unrefinedPotIsKnown=false；
this.refinedPot=params.refinedPot；
this.refinedPotIsKnown=false；
此参数为0；
此参数为0.unrefinedQty=0；
此参数为0；
this.refineDC=params.refineDC；
this.definedcisknown=false；
this.properties=[params.prop1，params.prop2，params.prop3，params.prop4]；
this.property已知=[false，false，false，false]；
this.whereFound=[]；
this.isPoisonous=params.isPoisonous；
this.genericsdescription=params.genericsdescription；
this.fullDescription=params.fullDescription；
}
//构造函数结束
//原型工作开始了
//原型材料
//原型的东西结束了
//传递给构造函数的对象文本示例
var baconParams={pic:“bacon.png”，
名字：“培根”，
未修正的部分：1，
精炼点：2，
DC:17，
方案一：“多汁”，
道具二：“脆皮”，
方案三：“烟熏”，
道具四：“烧焦”，
IsPosionous:错，
一般描述：“未识别的动物部分。”，
完整描述：“这是一种切成条状的猪肉制品。通常炸到酥脆后作为早餐食用。”；
var masterArray=[]；
函数fillList（）{
对于（i=0；i

如果您使用的是选择元素（看起来是），为什么不使用“更改”事件呢？每当用户在菜单中选择一个选项时，它都会触发，并且您的事件可以向您发送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
}

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

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

---

yourSELECT.value

我确实在使用select元素。这是我第一次听说“更改”侦听器，您能给我一个它返回的event.target.value的示例吗？我将对我的答案进行编辑，以更好地标记它。请注意，如果使用光标键导航选项，IE在每次选择一个新选项时都会触发一个更改事件，而其他浏览器只有在它失去焦点或以其他方式确认选择时才会这样做。是的，RobG是正确的。如果您需要支持IE，这将需要额外的控件。@SebastienD.-event.target是调度事件的实际元素，它适用于select和options，但是在大多数情况下，最好使用它来获取具有侦听器的元素，因为eventTarget可能是子元素。