Question

I made online drawing for electronics layout editing and used html form select tag to pick the component to draw.

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

….and so on

As the script growing, I need a html menu for easier component choosing, but I can’t implement the getelementsbytagname('li') to call for chosen component.

You can see it at: http://www.3lectronics.com/electronics-layout/Atarado-Draw1.html and figure what I’m talking about. I already browsed similar issues and didn’t find the appropriate answer.

Please help.

Answer 1

There’s a helpful resource at W3C to see what events are available from which HTML elements, and to figure out what to do in the JS another resource that tells you what properties JavaScript can access in which HTML elements.

As for the code. You’ll want to attach a JS listener to the onchange event of the select element.

The 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.
}

Happy coding.

update

HTML

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

JS

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

if you want you can wrap the text in the LI element in an html anchor to get it highlighted as a link or do this with css whichever way you prefer.