Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change a Select Box value with Javascript?

    Here's the code that I'm working with:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type ="text/javascript">
    function HouseSel(){
    document.getElementById("HouseSelect").value = '3'
    alert (document.getElementById("HouseSelect").value);
    }
    </script>
    </head>
    
    <body>
    
    
    <form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">
    
    <select name="item_name" id="HouseSelect">
                      <option value="0" selected="selected">--Please Select a House--</option>
                      <option value="1">Nags Head</option>
                        <option value="Rent Deposite: Calibre: ">Calibre</option>
                    </select>
    
    <input name="calculate3" type="button" id="calculate3" tabindex="2"     
            onclick="HouseSel(); " value="Calculate"/>
            </form>
    </body>
    </html>
    But it's still returning the initial value. How do I get it to 3?

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript">
    
    	function HouseSel(){
    
    		var selectEl = document.getElementById('HouseSelect');
    
    		var optionEls = selectEl.getElementsByTagName('option');
    		for (var i = 0, oEl; oEl = optionEls[i]; i++) {
    			// loop counts start from 0, so the 3rd option: 0, 1, 2
    			oEl.selected = (i == 2) ? 'selected' : false;
    		}
    
    		alert(selectEl.selectedIndex);
    
    	}
    
    </script>
    </head>
    
    <body>
    
    <form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">
    
    	<select name="HouseSelect" id="HouseSelect">
    		<option>--Please Select a House--</option>
    		<option value="1">Nags Head</option>
    		<option value="Rent Deposite: Calibre: ">Calibre</option>
    	</select>
    
    	<input type="button" value="Calculate" name="calculate3" id="calculate3" tabindex="2" onclick="HouseSel(); " />
    
    </form>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    To set by value....

    Just to update this post further for anyone else passing by...
    The example solution previous is doing more than it needs to.

    If we know the "Calibra" item is item number 3 in the select box then we don't need to do any looping to find it do we?
    We would only need to do a loop if we were searching for a value and we didn't know what index value the item was located at in the list.
    When working with arrays, the visible item 3 is actually item 2 when you are using arrays. As we know arrays start at 0 at the first item.

    ANY HOOOO....
    If you have a static list of items and you want to quickly set an item using the index number you could solve this question with this answer:
    Code:
    document.getElementById('HouseSelect').getElementsByTagName('option')[2].selected = 'selected'
    More information!...
    The original question by "XTREEMMAK" above shows the option value as being "Rent Deposite: Calibre:".
    We have to assume that this is a static form whereby the user just wants to pass in some friendly labels in the background.

    If you have a dynamic selection box and you can't predict where your item will be, it's always best to refer to the item using its value (as I already mentioned).
    What's a dynamic selection box? - A dynamic selection box is usually made up of items that are managed from a separate screen and items can be added or removed from the list.
    Normally, dynamic selection boxes use ids or keywords as their values. These are then used as a reference when the item is submitted.


    Here's an example of a select box that uses keyword values and friendly labels.

    Code:
    <select id='foo'>
    <option value='red'>Nice Red</option>
    <option value='blue'>Deep blue</option>
    <option value='green'>Clean green</option>
    </select>
    You could set the active selection to be "Clean green" by doing:
    Code:
    document.getElementById('foo').value = 'green';
    This means that we don't have to know WHERE the item is, we just have to know the keyword to refer to.

    To do this using the loop method you would do:
    Code:
    var opts = document.getElementById('foo').getElementsByTagName('option');
    for (var i=0;i<opts.length;i++){
    	opts[i].selected = (opts[i].value == "green"?"selected":"");
    }
    Hope that helps a bit more!
    Last edited by greatbigmassive; 03-13-2011 at 03:57 PM. Reason: Needed to say more


  •  

    Posting Permissions

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