Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: <select>

  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post

    <select>

    Code:
    <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).

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Well, I think you can attach onclick to each of the <option>s in *SOME* browsers.

    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    103
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Hi,

    Try to implement onchange event.

  • #6
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jassi.singh View Post
    Hi,

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

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    ** I GOT IT **
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    103
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by sherlockturtle View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •