www.webdeveloper.com
Results 1 to 10 of 10

Thread: Best way to act on select option

  1. #1
    Join Date
    Oct 2012
    Posts
    5

    Best way to act on select option

    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.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,029
    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)
    }

  3. #3
    Join Date
    Oct 2012
    Posts
    5
    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.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,029
    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.

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    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'>
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  6. #6
    Join Date
    Oct 2012
    Posts
    5
    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?

  7. #7
    Join Date
    Oct 2012
    Posts
    5
    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.

  8. #8
    Join Date
    Nov 2010
    Posts
    1,029
    note that
    Code:
    oreName = form.oreName.value
    will gove you the same result (but doesn't work with getting the text of the option)

  9. #9
    Join Date
    Oct 2012
    Posts
    5
    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. :-)

  10. #10
    Join Date
    Nov 2010
    Posts
    1,029
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles