Question

I want to select first option of all the select dropdowns having class required-entry in a page with Prototype JS. I have searched through SO questions and found many relevant questions but not what I exactly needed.

Thanks

Answer 1

It’s been quite a while since I’ve done any Prototype.js. So this may not be the best way to go about it, but it should work.

let’s say you have a page with:

<select class='required-entry'>
    <option value='a'>AAA</option>
    <option value='b'>BBB</option>
    <option​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ value='c'>CCC</option>
</select>

<select class='required-entry'>
    <option value='x'>XXX</option>
    <option value='y'>YYY</option>
    <option value='z'>ZZZ</option>
</select>​

You can grab the first option for each select by doing:

var firstOptions = [];

$$('.required-entry').each(function(sel, i) {
    firstOptions.push($(sel).getElementsBySelector('option')[0]);
});

// firstOptions is now an array containing the first options

Now, I couldn’t tell from your question if you wanted to retrieve the first options, or set the select value so that the first option is literally selected. Here’s the later:

$$('.required-entry').each(function(sel, i) {
    sel.selectedIndex = 0;
});