如何制作javascript调用的html菜单？

Question

我制作了电子版面编辑的在线绘图，并使用html表单选择标签来挑选要绘制的元件。

<label>Electronics component - <select id="chose">
        <option value="resistor">Resistor</option>
        <option value="pot">Potentiomenter</option>
        <option value="cap">Capacitor</option>

....and等

随着脚本的增长，我需要一个html菜单来更容易地选择组件，但我不能实现getelementsbytagname('li')来调用所选的组件。

你可以在http://www.3lectronics.com/electronics-layout/Atarado-Draw1.html上看到它，然后想明白我在说什么。我已经浏览过类似的问题，但没有找到合适的答案。

请帮帮忙。谢谢。

Answer 1

有一个有用的resource at W3C，它可以查看哪些HTML元素中有哪些事件可用，并确定在JS another resource中要做什么，它告诉您JavaScript可以访问哪些HTML元素中的哪些属性。

至于代码。您需要将一个JS侦听器附加到select元素的onchange事件。

HTML

<select id="chose" onchange="dropDownSelectionChange(this.form.chose)">

The JavaScript

function dropDownSelectionChange(dropdown)
{
    // the selected index in the dropdown
    var idx  = dropdown.selectedIndex
    // the selected value in the dropdown
    var value = dropdown.options[idx].value

    // do some work here.
}

祝你编码愉快。

更新

HTML

<ul>
  <li id="one" onclick="doStuff(this);">one</li>
</ul>

JS

function doStuff (elem) {
  alert(elem.id);
  return false;
}

如果需要，您可以将LI元素中的文本包装在html锚点中，以将其突出显示为链接，或者使用css以任何您喜欢的方式完成此操作。