Selecting first option of multiple select elements by Prototype JS

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

Marshall · Accepted Answer · 2012-08-01 20:27:13Z

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;
});

answered Aug 1, 2012 at 20:27

Marshall

4,7961 gold badge21 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kalpesh Over a year ago

Yes I wanted to literally select the first option. Your script even selects the first option, but the function which should be triggered on change event is not getting called. Any ideas?

Marshall Over a year ago

I think you could add a .fire for the $(sel) just before or after sel.selectedIndex = 0;

Kalpesh Over a year ago

Okay, finally achieved it from the answer by Greg in this post stackoverflow.com/questions/460644/… . Thanks

Collectives™ on Stack Overflow

Selecting first option of multiple select elements by Prototype JS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related