Как сделать HTML-меню для вызова JavaScript?

Question

Я сделал онлайн-чертеж для редактирования макета электроники и использовал HTML-тег выбора формы, чтобы выбрать компонент для рисования.

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

.... и т. Д.

По мере роста скрипта мне нужно HTML-меню для более легкого выбора компонента, но я не могу реализовать getelementsbytagname ('li') для вызова выбранного компонента.

Вы можете увидеть это по адресу: http://www.3lectronics.com/electronics-layout/Atarado-Draw1.html и понять, о чем я говорю. Я уже просматривал подобные проблемы и не нашел соответствующего ответа.

Пожалуйста, помогите. Спасибо.

Answer 1

Существует полезный ресурс на W3C , чтобы узнать, какие события доступны из каких элементов HTML, и выяснить, что делать в JS , другом ресурсе , который сообщает вам, какие свойства JavaScriptможет получить доступ к элементам HTML.

Что касается кода.Вы захотите присоединить слушателя JS к событию onchange элемента select.

HTML

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

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 в зависимости от того, каким образомвы предпочитаете.