Javascript 选择值加载

Question

我制作了一个带有下拉菜单的表格。

<tr>
    <td>items</td>
    <td><select id="afewitems">
        <option value="0">Select</option>
        <option value="1">item1</option>
        <option value="2">item2</option>
    </td></select>
</tr>

使用 javascript（不是 jQuery）我想根据选择在屏幕上动态加载项目。 示例：当我选择 item1 (value="1") 时，我希望根据选择在网页上加载额外的信息。 （文字和/或图片）

我在网站上找到了这个： Adding additional data to select options using jQuery http://jsfiddle.net/GsdCj/2/

所以我的问题是： 如何根据 Select ID/Value 在 Java 中加载预先编写的信息？

Answer 1

利用onchange HTML <select> 属性。

<select id="afewitems" onchange="changeInfo(this)">
<!--  (option tags) -->
<div id="info"></div>

JavaScript：

function changeInfo(el) {
    var info = [ 
        "some text",       // option 0
        "something else",  // option 1
        "..."              // option 2
    ];
    var val = el.options[el.selectedIndex].value;
    document.getElementById('info').innerHTML = info[val];
}

jsFiddle

这里是对多个<select> 标签的修改。

jsFiddle