...

View Full Version : <select>



sherlockturtle
10-04-2011, 11:19 PM
<select name="selectme" onChange="">
<option value="layer1name">1</option>
<option value="layer2name">2</option>
<option value="layer3name">3</option>
</select>

how can you make a onclick for this to work. So if you cliked the seconde one it would change somthing(i dont care what).

Old Pedant
10-05-2011, 01:28 AM
You mean that if the user clicks the second one when it is already selected you still want something to happen? That is, even if no change occurs?

sherlockturtle
10-05-2011, 04:03 AM
You mean that if the user clicks the second one when it is already selected you still want something to happen? That is, even if no change occurs?

Ya anytime you click on it, so its like a button.

Old Pedant
10-05-2011, 05:28 AM
Well, I think you can attach onclick to each of the <option>s in *SOME* browsers.



<form>
<select>
<option onclick="this.form.x.value=1"> ONE </option>
<option onclick="this.form.x.value=2"> TWO </option>
<option onclick="this.form.x.value=3"> THREE </option>
</select>
<input name="x">
</form>

I just tried that, and it only worked in FF. Not in MSIE or Chrome.

I can think of a couple of hacks, but not sure any of them would work in all browsers.

jassi.singh
10-05-2011, 09:16 AM
Hi,

Try to implement onchange event.

sherlockturtle
10-05-2011, 02:15 PM
Hi,

Try to implement onchange event.

I tried but when i would change to any of the selections it would do the function.

Philip M
10-05-2011, 02:48 PM
You are misunderstanding the nature of a select list. You cannot use onclick with an option in IE. Why do you not use radio buttons with onclick? Then every time you click on a button the function is triggered.

Old Pedant
10-05-2011, 08:47 PM
** I GOT IT **


<form>
<select onfocus="this.selectedIndex=0;"
onchange="v=this.selectedIndex;this.form.x.value=this.value;"
onblur="this.selectedIndex=v;">
<option>--choose--</option>
<option value="one"> one </option>
<option value="two"> two </option>
<option value="shoe"> shoe </option>
</select>
<input name="x">
</form>

Go ahead: Click on one of the values in the <select>. It copies its value to the <input>. Now change what is in the <input>. Now go back to the <select> and click on the *SAME OPTION*. It again copies its value to the <input>.

See the tricK? As soon as the <select> receives focus, it RESETS the selected option! So now, the onchange indeed works to trigger the copy of the value to the <input>. And then the onblur ensures that, as you leave the <select>, the option you chose is still displayed.

By combining all three, it worked the same in MSIE, FireFox, and Chrome.

jassi.singh
10-08-2011, 02:58 PM
I tried but when i would change to any of the selections it would do the function.

Hi,

you can call javascript function on change event of select element as shown below.

<SELECT NAME="selState" SIZE="1" ONCHANGE="HandleChange();">
<OPTION VALUE="IL">Illinois</OPTION>
<OPTION VALUE="MO">Missouri</OPTION>
<OPTION VALUE="HA">Hawaii</OPTION>
<OPTION VALUE="NY">New York</OPTION>

In handleChange() function you can acess the value

function HandleChange() {

// based on the selected value you can perform your action following is
//the line which will get you selected value from the list box.
// you can write case statement for each value.
alert(document.forms.selState.value);
}

http://www.4guysfromrolla.com/webtech/101398-1.shtml



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum