Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with onChange in a SELECT tag.

Status
Not open for further replies.
Albion

Albion

IS-IT--Management
Aug 8, 2000
517
US
How can I get the onChange option of a SELECT tag to execute a javascript function even if the user selects the currently selectied option?

Code: 
<SELECT onChange="funct(this);">
    <OPTION SELECTED value="1">1</OPTION>
    <OPTION value="2">2</OPTION>
    <OPTION value="3">3</OPTION>
</SELECT>

I.E. I need funct(this) to execute even if the user selects "1" from the list. Right now it only runs if the selection is changed to "2" or "3".

-Craig
 
Sort by date Sort by votes
Short answer is you can't. Its called onChange because it only fires when the value "changes".

You can either add a blank value to the select box to force an actual selection, or maybe use another event such as onmousedown, onmouseup, onClick etc.. to run the script whenever the mouse button is clicked, or pressed. However this my cause problems, as the value of the select box may not get set before the script is run.

For further JS questions you may want to ask in forum216









----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
I apologize, sometimes the HTML and javascript gets so intertwined I don't know where to ask. This question dealt with the onChange option of a SELECT HTML tag so I figured it should go here.

Thanks for the response.
 
Upvote 0 Downvote
Code: 
<body onLoad="funct(this);">
should do it w/o further change.
 
Upvote 0 Downvote
dkdude said:
Code: 
<body onLoad="funct(this);">

should do it w/o further change.
Click to expand...
No, that will run it when the page loads, how is that helpful?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote

Very True feherke. Missed that part.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
If I read Albion's question correct, he needs to fetch the selected index to do some "whatever-he-needs-to-do-function"; and this will accomplish just that:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
  <title>...</title>
</head>

<body onLoad="funct(this)">

  <script type="text/javascript">

    function funct(obj) {

     /***************************************************
      *   Just for testing indexes and selected values  *
      *   Replace with code of your desire and purpose  *
      ***************************************************/

      var optionID = document.getElementById('myDropDown');
      var optionIndex = optionID.selectedIndex;
      var optionValue = optionID.options[optionIndex].value;

      alert('Current option selected is '+optionValue);
    }

  </script>

  <select onChange="funct(this)" id="myDropDown">
      <option selected value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
  </select>

</body>
</html>

... right?
 
Upvote 0 Downvote
... I should add -the desired function as called by a [tt]onChange[/tt]-event will be fired, but initially as a [tt]onLoad[/tt]-event, hence not requiring "initial" change state to fire the desired event-funtion. But as long as it's the same function, it will yield the same result ... (without initial change-state).

Albion, did I read your question correct or ... ?
 
Upvote 0 Downvote
-and vacunita, you are right, we should be discussing this topic in the JavaScript forum ;-) Just couldn't help it :-D
 
Upvote 0 Downvote
dkdude,

I haven't tested it yet, but I follow the logic.

In other words when the page loads it fires the event for the initial selection, thus making the changes on the page I desire. That way if a users re-selects the default option the desired effect has already happened leaving no need to select it in the first place. I think the only reason this might not work is when the author has a default effect on a page which does not match the effect of the defaultly selected option. In my situation, that's not the case, so we'll see.

Thanks for the example.

-Al
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
319
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
122
Alt255
Alt255
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
689
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top