SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing item selected in a select box

    Hi,
    I have a select box, is there a way to get javascript to select an item for me?

    Here is my html, can I get javascript to select the option for ray?

    <select name="camplocation" id="camplocation" >
    <option value="3">--</option>
    <option value="18">bridge</option>
    <option value="19">can</option>
    <option value="20">ray</option> </select></
    thanks in advance

  2. #2
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    a few ways:

    Code:
    <script type="text/javascript">
    window.onload=function(){
    	var s = document.getElementById('camplocation');
    	for( o=0; o<s.length; o++ ) {
    		if( s[o].value == '20' ) s[o].selected = true;
    	}
    }
    </script>
    or
    Code:
    <script type="text/javascript">
    window.onload=function(){
    	var s = document.getElementById('camplocation');
    	for( o=0; o<s.length; o++ ) {
    		if( s[o].innerHTML == 'ray' ) s[o].selected = true;
    	}
    }
    </script>
    or
    Code:
    <script type="text/javascript">
    window.onload=function(){
    	var s = document.getElementById('camplocation');
    	s[3].selected = true;
    }
    </script>

  3. #3
    Non-Member
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
            <title></title>
            <script type="text/javascript">
                window.onload=function(){
                    var sel = document.getElementById('camplocation');
                    for(i=0; i < sel.options.length; i++) {
                        if(sel.options[i].value == '20') {
                            sel.options[i].selected = true;
                            i = sel.options.length;
                        }
                    }
                }
            </script>
        </head>
    
        <body>
            <select name="camplocation" id="camplocation" >
                <option value="3">--</option>
                <option value="18">bridge</option>
                <option value="19">can</option>
                <option value="20">ray</option>
            </select>
        </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Johnyboy, used your example

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or, if you decide to use jQuery and make your Javascript life easier by 10000 times:

    Code JavaScript:
    $("#camplocation option[value='20']").attr("selected", true);


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
  •