set an option as default selected?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

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?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

cool, I'll give it a try
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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 554 times

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Doh, one of these days I'll learn to refresh the page after I come back to it to reply later.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

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
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

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.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

rock on, that did it. Thanks a ton guys
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 117 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.