选择下拉列表项而不触发onchange事件？

Question

I want to populate a drop-list with several items and select a default item:

<select onchange="DoSomething(this)">
    <option value="abb">This is the second item</option>
    <option value="abc" selected>This is the third item</option>
    etc...
</select>

However I don't want the onChange event to fire (or I want the code triggered by onChange to be ignored) until the user selects an item. At the moment the onChange event fires as the page loads and the selected item is chosen by default.

Can I wrap this code in PHP to achieve this - if so how?

Answer 1

?!

Manipulating the HTML DOM directly in JavaScript doesn't fire events. You can even call myForm.submit() and the browser will not fire the form's onsubmit event, therefore bypassing client-side onsubmit validation.

I don't know what you've tried, but this is one way to select for example the first item of the drop-down list:

document.getElementsByTagName('select')[0].getElementsByTagName('option')[0].selected = true;

(http://jsfiddle.net/Jawh6/)

Crude, I know. Usually your forms and fields would be named or otherwise identified so you can address them more excplicitly: e.g. document.myForm.mySelect.options[0].selected = true;

---

Since your PHP is already setting the 'selected' attribute on the option (or your question isn't very well tagged), this would be the best place to set the default option when the page loads, that requires no JavaScript at all.

If you're interested in how to get PHP to write out the HTML for a select element and correctly assign the selected attribute to the intended option, I reckon you need to write a new question to attract the PHP folk.

---

Either you have other calls to your DoSomething function, or you've oversimplified your example and you're actually using a framework to bind the event handler to the field and maybe you accidentally called your function instead of assigning it, e.g.:

mySelect.onchange = DoSomething(); // oops, this calls DoSomething right away.

mySelect.onchange = DoSomething; // this sets DoSomething as the event handler.