 |  |  |  |  |  |  |  |
Javascript generated drop down menu
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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
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
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.
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?
Can I use onLoad() to do that?
Ok, this is very rudimentary, but consider this page:
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.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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.
I am having a similar problem, and I dont have access to HEAD or BODY section, how can I use onload. this.onload ?
 |
Similar Threads
- Easy drop down menu? (JavaScript / DHTML / AJAX)
- Problem using onload (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Passing paramter from javascript to jsp
- Next Thread: Flash within DHTML
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest JavaScript / DHTML / AJAX Posts
- Today's Posts
- Unanswered Threads
acid2 ajax ajaxexample ajaxjspservlets array beta box browser captchaformproblem cart checkbox child close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype redirect runtime safari scale scriptlets scroll search security select shopping size software unicode w3c web window windowofwords wysiwyg \n
