Best way to act on select option

**darrynpeterlowe** · 10-10-2012 05:53 PM

Hi guys.

I'm very new to Javascript although I have done a fair amount of PHP. The two languages seem to be sufficiently different or I'm doing something wrong to ask this question.

What is the best way to get the value of an option, then act on it according to the value in the option.

For example if I have

Apple
Banana
Orange

How do I get the script to do something with oranges?

Do I use Switch or a series of If/Elseif statements?

Also should I use the value tag for options as having spaces would cause issues wouldn't they?

Code:

<select>
<option value="fruitApple">Apples are nice</option>
<option value="fruitBanana">Bananas are nice</option>
<option value="fruitOrange">Oranges are nice</option> 
</select>

If this is the case then how do you select the value?

Thanks for your help folks.

**xelawho** · 10-10-2012 07:51 PM

by putting an onchange event onto the select tag which calls a function. Old school method that is still fine for beginner's purposes:

Code:

<select onchange="showVal(this.value)">

function showVal(theval){
alert(theval)
}

**darrynpeterlowe** · 10-10-2012 08:13 PM

The problem I'm having is that I don't want the value changed on onchange but when the user clicks the Submit button.

Also what is acting as the value? Is it the stuff between the option tags or is it the bit set by the value tag?

i.e is it:

Code:

<option value="fruitApple">Apples are nice</option>

or is it:

Code:

<option value="fruitApple">Apples are nice</option>

In PHP you'd use the latter but it seems Javascript can use the former.

Thanks again for your help.

**xelawho** · 10-10-2012 09:26 PM

the value is "fruitApple". The text is "Apples are nice". If you want to pass the text to the function that would be a different code.

Nothing actually changes on change - all that happens is that the function fires and the value gets passed to it. If you don't want that to happen, don't give it an onchange. As long as you give it a name and put it inside the form the value will be submitted when the form submits.

**Logic Ali** · 10-10-2012 09:51 PM

value is determined by the value attribute if set.
Always assign the value attribute or you'll get inconsistent results.

The problem I'm having is that I don't want the value changed on onchange but when the user clicks the Submit button.

Not quite sure what you mean by that, but you can use the onsubmit handler to read the value of the <select> and copy it presumably into a hidden-type element.

Code:

<form onsubmit='this.notShown.value = this.mySelect.value'>

<select name = 'mySelect'>
....

<input type='hidden' name='notShown'>

**darrynpeterlowe** · 10-11-2012 03:41 PM

I think I've found out what I've been doing wrong.

My code looked like this:

Code:

oreName = form.oreName.selectedIndex
oreName = form.oreName.options[oreName].text

This gives me the text between the option open and close tags.

However if I change my code to this:

Code:

oreName = form.oreName.selectedIndex
oreName = form.oreName.options[oreName].value

Then I get the values set in the value="" part of the option.

Now I come to the issue I had at the outset. What is better to use, if / elseif statements or switch and if the latter how would I correctly use it?

**darrynpeterlowe** · 10-11-2012 04:01 PM

Oh sweet I've worked out using switch. It all came down to accessing the values.

Thanks for your help folks I truly do appreciate it.

**xelawho** · 10-11-2012 07:39 PM

note that

Code:

oreName = form.oreName.value

will gove you the same result (but doesn't work with getting the text of the option)

**darrynpeterlowe** · 10-11-2012 07:59 PM

Oh right, so I can save more time on typing.

I have to admit most of what I've been using has really been through stuff I've gleamed from various tutorials.

I'm all for code simplification. :-)

**xelawho** · 10-11-2012 08:08 PM

dude, if you want to save on typing you've got to get into this:

Code:

<body>
<select id="myselect" onchange="showOpt(this)">
<option value="0">Please select an option</option>
<option value="red">Beans</option>
<option value="blue">Jeans</option>
</select>
<script>
function showOpt(sel) {
alert("value is "+sel.value);
alert("index is "+sel.selectedIndex);
alert("id is "+sel.id)
}
</script>
</body>

Thread: Best way to act on select option

Thread Tools

Display

Best way to act on select option

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions