SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setting multiple selects to 0

    Hi, I have a selection of dynamicly created drop down selection boxes, that I want to set the all to 0 - or the first in the list.

    How can I do this when potentially I dont know the id of them, although they all have the same name being extra[]

    I have thought about a for each loop but I cant find any links on it to try it out?

    can any one help

    Thanks
    CHris

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your generating the list box dynamically, and want to make the first item selected by default here is the code in php, which you can easily translate to javascript --- basically, if i=1 the first item, then set the string $selected to " selected " otherwise, make it blank.

    Code:
    for($i=1; $i <= $totalitems; $i+){
     
    $selected = "";
    
     if($i==1)  $selected = " selected ";  
     
    $mylist = "<option value=$somevalue name=mylist[] $selected >$description</option";
    
    
    }
    Is this what you are referring to?
    intragenesis, llc professional web & graphic design

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what Im trying to do is have a reset button that changes the selections back to the first item in the list.

    eg I have 3 select boxes and I chosen options 2, 4 and 6 from those boxes, now when I hit the reset button I want all the options to go back to 0 or the first option in the list.

    hope this is clearer
    thanks
    chris

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    Hi Chris,
    I think I get what you are after......

    Code:
    function elmLoop(){
    
    var theForm = document.forms[0]
    
       	for(i=0; i<theForm.elements.length; i++){
    		if(theForm.elements[i].type == 'select-one') {
    				if (theForm.elements[i].options[theForm.elements[i].selectedIndex].defaultSelected) {
    					theForm.elements[i].options[theForm.elements[i].selectedIndex].selected = true;
    				} else {
    					theForm.elements[i].options[theForm.elements[i].selectedIndex].selected = false;
    				}
    		}
    	}
    
    }
    (little bit messy sorry, still learning javascript!)

    TestForm
    Code:
    <form name="resetSelect" action="" id="resetSelect">
    	<select name="mySelect_1">
    		<option selected>Option 1</option>
    		<option>Option 2</option>
    		<option>Option 3</option>
    	</select>
    <br />
    	<select name="mySelect_2">
    		<option>Option 1</option>
    		<option>Option 2</option>
    		<option>Option 3</option>
    	</select>
    <br />
     	<select name="mySelect_3">
    		<option>Option 1</option>
    		<option>Option 2</option>
    		<option>Option 3</option>
    	</select>
    	
    	<input type="button" name="resetMySelect" value="reset select" onclick="elmLoop()" />
    
    
    </form>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You don't need Javascript for this.
    HTML Code:
    <form id="a">
    <select>
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <input type="reset">
    </form>
    The reset button changes anything in the same form wrapper back to the default value. Hopefully this will work with dynamically created SELECT elements too, though I haven't tested it.

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    It does work with selects Raffles as I thought about it too, but then I thought what if the OP doesnt want to reset the entire form - just the selects.....?

    (and it gave me chance to do some javascript too )
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Spike,
    works brilliantly in firefox but doesnt do anything in IE, no errors or anything.

    any reason why?

    thanks chris

  8. #8
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    You don't need Javascript for this.
    HTML Code:
    <form id="a">
    <select>
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <input type="reset">
    </form>
    The reset button changes anything in the same form wrapper back to the default value. Hopefully this will work with dynamically created SELECT elements too, though I haven't tested it.
    Thanks but that would reset the rest of the form and i only want those reset.

    thanks again
    chris

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah OK, as Spike suspected.

    I would do it like this:
    HTML Code:
    <form id="a">
    <select name="extra[]">
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <select name="extra[]">
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <select name="extra[]">
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <input type="button" value="Reset these bad boys" id="r">
    </form>
    This would go in the head:
    Code Javascript:
    function init() {
      document.getElementById('r').onclick = function() {
        var s = this.parentNode.getElementsByTagName('select');
        for (var i = 0; i < s.length; i++) {
          s[i].getElementsByTagName('option')[0].selected = true;
        }
      }
    }
    window.onload = init;
    Naturally if you have other things happening onload you need to put them all in the same function to be run onload.

  10. #10
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Ah OK, as Spike suspected.

    I would do it like this:
    HTML Code:
    <form id="a">
    <select name="extra[]">
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <select name="extra[]">
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <select name="extra[]">
    <option>Lots of options</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <input type="button" value="Reset these bad boys" id="r">
    </form>
    This would go in the head:
    Code Javascript:
    function init() {
      document.getElementById('r').onclick = function() {
        var s = this.parentNode.getElementsByTagName('select');
        for (var i = 0; i < s.length; i++) {
          s[i].getElementsByTagName('option')[0].selected = true;
        }
      }
    }
    window.onload = init;
    Naturally if you have other things happening onload you need to put them all in the same function to be run onload.

    Thanks very much, that worked like a charm. Is there anywhere where I can find a list of handlers like getElementsByTagName and all the other ones, it would save so much time if I find what I need instead of asking for help all the time

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can find a list here:
    http://developer.mozilla.org/en/docs/DOM:document

    Also see this which is useful:
    http://developer.mozilla.org/en/docs/DOM:element

    And also have a look at the "Javascript Links and Resources" sticky thread at the top of this forum.

  12. #12
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    Great answer Rafael
    I wasnt far wrong just the roundabout route!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Spike.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •