944,001 Members | Top Members by Rank

Ad:
Jun 30th, 2005
0

Javascript generated drop down menu

Expand Post »
I am using javascript to display a dropdown menu on an html page. This menu lists 48 states and is used to calculate shipping costs to each state. I have an onChange() event in the <select> tag that sends the selected state to another function to figure up the shipping cost. The page is refreshed with 'location.href=location.href'. When the page is refreshed the shipping amount is displayed in the page. Everything works fine except for one thing.
When the page refreshes the State the user selected is not displayed in the dropdown box. It defaults back to the first option in the list.

It would be easy to fix this if the dropdown menu was submitted in a form but it is actually in the script itself. What would be an easy way to show the selected state in the box when the page is refreshed?

I have tried using a cookie but couldn't figure out how to make the selected state the active option. I am not too good with cookies so maybe I did something wrong.

How would I go about setting a cookie for a <select> and set the selected option 'Active' when the page reloads??

Thanks


http://www.j-1computers.com
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jman25 is offline Offline
2 posts
since Jun 2005
Jun 30th, 2005
0

Re: Javascript generated drop down menu

I would append a querystring, containing the value of the previously selected state. Then, author an onload script that checked for the querystring value, and make that the selected option in the select list. If there is no querystring (ie/ first time the page loads), then select some default state.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Jun 30th, 2005
0

Re: Javascript generated drop down menu

Thank you for the reply. I tried what you suggested and now have it to where the index number of the selected option is appended to the URL. I had not thought of doing that. Good Idea!! But I still can't figure out how to get the index number to be the option selected. I tried using the onLoad() event but I couldn't get it to work. The select object is not in the actual page, it's in an external .js.
Can I use onLoad() to do that?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jman25 is offline Offline
2 posts
since Jun 2005
Jul 1st, 2005
0

Re: Javascript generated drop down menu

Ok, this is very rudimentary, but consider this page:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function parseState()
  5. {
  6. var q = unescape(location.search);
  7. q = q.substring(7, q.length);
  8. if (q != "")
  9. {
  10. document.getElementById("state").options.selectedIndex = q;
  11. }
  12. }
  13. </script>
  14. </head>
  15. <body onload="parseState();">
  16. <form>
  17. <select id="state">
  18. <option value="" selected="selected">Select a State</option>
  19. <option value="AL">Alabama</option>
  20. <option value="AK">Alaska</option>
  21. <option value="AZ">Arizona</option>
  22. <option value="AR">Arkansas</option>
  23. <option value="CA">California</option>
  24. <option value="CO">Colorado</option>
  25. <option value="CT">Connecticut</option>
  26. <option value="DE">Delaware</option>
  27. <option value="DC">District Of Columbia</option>
  28. <option value="FL">Florida</option>
  29. <option value="GA">Georgia</option>
  30. <option value="HI">Hawaii</option>
  31. <option value="ID">Idaho</option>
  32. <option value="IL">Illinois</option>
  33. <option value="IN">Indiana</option>
  34. <option value="IA">Iowa</option>
  35. <option value="KS">Kansas</option>
  36. <option value="KY">Kentucky</option>
  37. <option value="LA">Louisiana</option>
  38. <option value="ME">Maine</option>
  39. <option value="MD">Maryland</option>
  40. <option value="MA">Massachusetts</option>
  41. <option value="MI">Michigan</option>
  42. <option value="MN">Minnesota</option>
  43. <option value="MS">Mississippi</option>
  44. <option value="MO">Missouri</option>
  45. <option value="MT">Montana</option>
  46. <option value="NE">Nebraska</option>
  47. <option value="NV">Nevada</option>
  48. <option value="NH">New Hampshire</option>
  49. <option value="NJ">New Jersey</option>
  50. <option value="NM">New Mexico</option>
  51. <option value="NY">New York</option>
  52. <option value="NC">North Carolina</option>
  53. <option value="ND">North Dakota</option>
  54. <option value="OH">Ohio</option>
  55. <option value="OK">Oklahoma</option>
  56. <option value="OR">Oregon</option>
  57. <option value="PA">Pennsylvania</option>
  58. <option value="RI">Rhode Island</option>
  59. <option value="SC">South Carolina</option>
  60. <option value="SD">South Dakota</option>
  61. <option value="TN">Tennessee</option>
  62. <option value="TX">Texas</option>
  63. <option value="UT">Utah</option>
  64. <option value="VT">Vermont</option>
  65. <option value="VA">Virginia</option>
  66. <option value="WA">Washington</option>
  67. <option value="WV">West Virginia</option>
  68. <option value="WI">Wisconsin</option>
  69. <option value="WY">Wyoming</option>
  70. </select>
  71. </form>
  72. </body>
  73. </html>

If this page was named "pickstate.html", and you loaded it with the querystring:

pickstate.html?state=1

Then, "Alaska" would be selected in the SELECT element.

Why do I say it's rudimentary? For one, the querystring parser isn't robust. Ideally, you'd parse the entire querystring into a JavaScript array, so you could pass in multiple values. Not important in your scenario. Also, it relies on "?state=" having seven characters, intead of finding the value by searching for the equal sign.

Next, the index has no association with the actual value. I would create an array of state names, and instead of passing in the INDEX, I would pass in the two letter state value. I would DERIVE the index by finding the state abbreviation in the array.

But the point was to show you the mechanism. It doesn't matter if the SELECT element is built via an external JavaScript, as long as it is rendered onto the page.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Jul 5th, 2005
0

Re: Javascript generated drop down menu

Did that answer your question? Any feedback?
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Jul 11th, 2005
0

Re: Javascript generated drop down menu

I am having a similar problem, and I dont have access to HEAD or BODY section, how can I use onload. this.onload ?
Reputation Points: 10
Solved Threads: 1
Newbie Poster
shahdhruv is offline Offline
10 posts
since Jul 2005
Jul 11th, 2005
0

Re: Javascript generated drop down menu

Please post your question in a new thread.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Jul 11th, 2005
0

Re: Javascript generated drop down menu

Thanks, I will.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
shahdhruv is offline Offline
10 posts
since Jul 2005

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Passing paramter from javascript to jsp
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Flash within DHTML





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC