Question

I have a select dropdown in a html file that i can’t really touch

<select id="color" onChange="javascript:changeColor(this)">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="gold">Gold</option>
</select>

I am trying to manipulate that using prototype js

var update_dropdown=$$('select#color option');
var option_length= update_dropdown.length;
for (var m = 0; m < option_length; m++) {
    if(update_dropdown[m].value==selected_ColorId) {
        update_dropdown[m].selected=true;
    }
}

is there any way that i can call onChange event that is being called in the html , like in this instance changeColor()?I am using prototype js
thanks

Answer 1

You don’t need to call the change event itself. Since the change event is just hooked up to a javascript function of yours, you can just call the changeColor function directly with the appropriate parameters to mimic when the actual event occurs.

var selectObj = document.getElementById('color');
changeColor.call(selectObj, selectObj);

This will do that same thing as changeColor(this).

FYI, in the two arguments to changeColor.call(a, b), the a argument sets the this pointer in the changeColor function to be your select object and the b argument sets the first function argument in the changeColor function to be your select object to match how you have it called in your HTML.