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