Question

I was working on a script that grabs the value from the selected option in a drop down select list and assigns it to an object. The only problem I’m having is that it’s saying I have a null object.

The .js is as follows:

    var s = document.getElementById('mode');
alert(s.options[s.options.selectedIndex].value);
function selectValue(){

  yo.newSelect(s.options[s.options.selectedIndex].value);
  return true;
}

The HTML is as follows:

 <div id="text_editing">
       <form action="javascript:;" method="post" onsubmit="editHomePage()">
       <select name="CYD" id="mode" onchange="selectValue()">
        <option value="Home">Home</option>
        <option value="About">About</option>
        <option value="Contact">Contact</option>
       </select>
<textarea name="sexyText" row="500" col=500">    
</textarea>
<input value="submit" name="text_submit" type="submit" onclick="selectValue()">
       </form>

I’m just looking for a solution in plain js. I not interested in using jQuery for such a small site.

Answer 1

If all your options have a value, you can simply write:

alert(s.value);

which will return the value of the first selected option (so not suitable for multiple selects with more than one selected).

Incidentally, from your listener you could do:

<input type="submit" onclick="selectValue(this)">

then in the function:

function selectValue(el) {
  alert(el.form.mode.value);
}