Back To Programming / Scripting / Coding Forum

set an option as default selected?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post June 18th, 2009, 10:14 am

How would you go about setting up an option in a drop down list as the default selected using javascript?

I'm working on a site that needs to fill in some information automatically on a form depending on which button is pressed. Checked my "Javascript Bible" book, and didn't get very far. Checked on google, didn't get very far. Can this be done with jQuery?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 18th, 2009, 10:14 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post June 18th, 2009, 10:23 am

The HTML format is such...

Code: [ Select ]
 
<form name="myForm" id="myForm">
    <select name="myField" id="myField">
         <option value="1" SELECTED>Option 1</option>
         <option value="2">Option 2</option>
          <option value="3">Option 3</option>
    </select>
</form>
 
  1.  
  2. <form name="myForm" id="myForm">
  3.     <select name="myField" id="myField">
  4.          <option value="1" SELECTED>Option 1</option>
  5.          <option value="2">Option 2</option>
  6.           <option value="3">Option 3</option>
  7.     </select>
  8. </form>
  9.  


So if you wanted to do it with JavaScript, I think this will work:
Code: [ Select ]
 
document.getElementById('myField').options[index].selected = true;
 
  1.  
  2. document.getElementById('myField').options[index].selected = true;
  3.  


So, if you don't know the indices going into the function, then you can try this:
Code: [ Select ]
 
var list = document.getElementById('myField');
for (var i=0; i<list.options.count-1; i++) {
  if (list.options[i].value == 'targetValueHere') {
list.options[i].selected = true;
  }
}
 
  1.  
  2. var list = document.getElementById('myField');
  3. for (var i=0; i<list.options.count-1; i++) {
  4.   if (list.options[i].value == 'targetValueHere') {
  5. list.options[i].selected = true;
  6.   }
  7. }
  8.  


And in JQuery:
Code: [ Select ]
$("#myForm select[@name='myField'] option[@selected='selected']").removeAttr("selected"); //deselect all options
$("#myForm select[@name='myField'] option[@value='2']").attr("selected","selected"); //select the second option
  1. $("#myForm select[@name='myField'] option[@selected='selected']").removeAttr("selected"); //deselect all options
  2. $("#myForm select[@name='myField'] option[@value='2']").attr("selected","selected"); //select the second option
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post June 18th, 2009, 10:28 am

cool, I'll give it a try
Use your words like arrows to shoot toward your goal.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post June 18th, 2009, 10:33 am

Good luck, I threw in some jquery to point you in the right direction I hope. I didn't test it though. You may also want to have a look at this tutorial as an alternative means of getting it done with JQuery.
I'd love to change the world, but they won't give me the source code.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post June 18th, 2009, 10:48 am

Code: [ Select ]
<select name="selector" id="selector">
    <option value="1">Option One</option>
    <option value="2">Option Two</option>
    <option value="3">Option Three</option>
</select>
  1. <select name="selector" id="selector">
  2.     <option value="1">Option One</option>
  3.     <option value="2">Option Two</option>
  4.     <option value="3">Option Three</option>
  5. </select>


Code: [ Select ]
$('#selector > option[value="2"]').attr('selected', 'selected');
Attachments:
example.zip

(603 Bytes) Downloaded 423 times

Strong with this one, the sudo is.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post June 18th, 2009, 10:50 am

Doh, one of these days I'll learn to refresh the page after I come back to it to reply later.
Strong with this one, the sudo is.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post June 18th, 2009, 11:22 am

Esp. around me. :) BWM's gonna break my arms one of these days for editing a post 1094280934 times rather than previewing. Never fails, I make a post and my brain reviews it for the next 3 mins and I keep thinking of new stuff to add.
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post June 18th, 2009, 2:58 pm

lol, I've done the same. Either that or I ask a question, post it, and then realize the answer 0.23 seconds later and fix it. Than I have to post the answer and look dumb :P
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post June 18th, 2009, 3:41 pm

hmmm, neither example seems to be working for me. Perhaps a point at the url may help:

clicky

I'm using jQuery to hide the form, then change the selected option, then slidetoggle. Change selection examples don't seem to be working.
Use your words like arrows to shoot toward your goal.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post June 18th, 2009, 4:07 pm

Have you tried it using joebert's example? You're getting the uncaught exception b/c the '@' identifier is no longer supported in the version of jquery that you have linked. I use an older version at work and forget that these were deprecated.

Edit: From JQuery docs:

Quote:
Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the '@' symbol from your selectors in order to make them work again.
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post June 18th, 2009, 4:38 pm

rock on, that did it. Thanks a ton guys
Use your words like arrows to shoot toward your goal.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post June 18th, 2009, 6:09 pm

Yep, looks good. Now I may be getting picky, but if it were me, I'd place an invisible div underneath the form container layer that stretched just a bit taller than the form when showing. That would make the page render to the largest height it needs and keep it there as the form gets hidden and slid into place. Right now, when I swap between forms, my vertical scroll bar shrinks and grows with the page, making my view jump up and down.
I'd love to change the world, but they won't give me the source code.

Page 1 of 1

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 201 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.