/    Sign up×
Community /Pin to ProfileBookmark

Changing selected element of a select

Copy linkTweet thisAlerts:
Feb 15.2010

Hi,

I’ve got a problem and i’ve been searching everywhere to solve it but i didn’t figure out a solution, probably that its somehow not supported or i don’t know.

Anyway, i need to change the selected item in a select dropdown list in html.
Obviously i want to change it with javascript. For example i’ve got tree items add/edit/delete and if the user presses add (button) the selected item will be add.

I hope i explained myself well… Any ideas friends ?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERFeb 15.2010 — Can you post some HTML code to see what the layout will look like?
Copy linkTweet thisAlerts:
@kurteknikkauthorFeb 15.2010 — It is very simple:

<select name="selectAction" id="selectAction">

<option selected="selected"></option>

<option value="add">Add Item</option>

<option value="edit">Edit Item</option>

<option value="delete">Delete Item</option>

</select>

<input type="button" id="btnAdd" value="Add"/>

So when in the onclick of this button, i want to change the selected value to "add" of the select list above...
Copy linkTweet thisAlerts:
@JMRKERFeb 15.2010 — How about this ...
<i>
</i>&lt;select name="selectAction" id="selectAction"&gt;
&lt;option selected="selected"&gt;&lt;/option&gt;
&lt;option value="add"&gt;Add Item&lt;/option&gt;
&lt;option value="edit"&gt;Edit Item&lt;/option&gt;
&lt;option value="delete"&gt;Delete Item&lt;/option&gt;
&lt;/select&gt;

&lt;input type="button" id="btnAdd" value="Add" onclick="document.getElementById('selectAction').selectedIndex = 1"/&gt;
&lt;input type="button" id="btnEdit" value="Edit" onclick="document.getElementById('selectAction').selectedIndex = 2"/&gt;
&lt;input type="button" id="btnDelete" value="Delete" onclick="document.getElementById('selectAction').selectedIndex = 3"/&gt;

Untested, but should be close.
Copy linkTweet thisAlerts:
@kurteknikkauthorFeb 15.2010 — Hi i'm afraid but that doesn't work..

BUT

I found a solution and i would like to share if here:

i'm getting an array of options of my select using: getElementByTagName('option') and i'm setting [1]/[2]/[3].selected = true;

Thanks a lot anyway ?
Copy linkTweet thisAlerts:
@JMRKERFeb 15.2010 — That was going to be my next suggestion, ?

but I'm not sure why the first post did not work. ?

It works fine for me in FF. :eek:

Just for my own peace of mind. ?

What browser are you using?

Are you getting any errors?
Copy linkTweet thisAlerts:
@TriLLiFeb 15.2010 — Hi,

Probably best solution is to create one method in javascript and to pass id of select and value that you wan't to select, you can do it like this
[CODE]function mySelect(select, value)
{
var _el = document.getElementById(select);
for(var i = 0; i < _el.length; i++)
{
if(_el[i].value == value)
{
_el[i].setAttribute('selected', 'selected');
break;
}
}
}[/CODE]

nwo call this method on click and pass right parameter and u can use it on any page with multiple select boxes
×

Success!

Help @kurteknikk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...