How do you monitor a select tag?

Question

I'm sure there is a very simple solution, I just don't know it...

I have a text box and a selector. The first option in the selection is custom, where they can input with the text box. If they select something else, the text box becomes disabled.

I'm guessing the solution will be to put an onclick to test the value, but is there another way?

Answer 1

Use the change event, not the click event.

var select = document.getElementById('mySelect'),
    textbox = document.getElementById('myTextbox');

function onSelectChanged()
{
    console.log(select.selectedIndex);
    textbox.disabled = select.selectedIndex !== 0;
}

if (select.addEventListener)
{
    select.addEventListener('change', onSelectChanged, false);
}
else
{
    // !@#$ing IE support, of course
    select.attachEvent('onchange', onSelectChanged, false);
}

Demo: http://jsfiddle.net/mattball/pJMWN/