SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing selected drop down option..

    I had code that updates the value of a text box:

    Code:
    document.getElementById('textbox[1]').value = colour_b;
    However I've had to change the text box to a drop down box (<select>)... However this code doesn't work...

    Code:
    document.getElementById('select[1]').value = colour_b;
    What code would I need to use to change the selected drop down option?

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing select options

    Depending on what you want to do, here is a sample.

    The first function changes the currently selected option to a different option, the 2nd example changes the text of the currently selected option to a different value.

    Dave

    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=iso-8859-1" />
    <title>Javascript Dynamically Changing Select Options</title>
    <script type="text/javascript">
    	// Changes the currently selected option to a different option
    	function updateSelect1(val) {
    		var select1 = document.getElementById("select1");
    		select1.selectedIndex = val;
    		return;
    	}
    	
    	// Changes the currently selected option text.
    	function updateSelect2(val) {
    		var select1 = document.getElementById("select2");
    		select1.options[select1.selectedIndex].text = val;
    		return;
    	}
    
    </script>
    </head>
    
    <body>
    <form action="javascript:void(0)">
    	<select id="select1">
    		<option>1</option>
    		<option>2</option>
    		<option>3</option>
    	</select><br /><br />
    	<select id="select2">
    		<option>A</option>
    		<option>B</option>
    		<option>C</option>
    	</select><br /><br />
    	<input type="button" value="select1" onclick="updateSelect1(2);" /><br /><br />
    	<input type="button" value="select2" onclick="updateSelect2(2);" />
    </form>
    </body>
    </html>

  3. #3
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I wasn't clear enough. The first option is the one I need to go with... However I can't get it to work. This is the error from the FireFox error console... Don't know if it helps you.

    Error: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLSelectElement.selectedIndex]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://network:85/in_progress/pnoe/includes/scripts.js :: changephoto :: line 69" data: no]

    Here are some snippets from my code:

    HTML Code:
    <select id="select[1]">
    <option value="9">White</option>
    <option value="10">Earth</option>
    <option value="11">Light Blue</option>
    </select>
    
    <table border="0" cellpadding="0" cellspacing="0" style="margin-top: 5px;">
    <tr>
    <td>
    
    <a href="#" onclick="changephoto('listing_1_1164857751.jpg')"><img src="listing_1_1164857751.jpg" border="0" id="listing_1_1164857751.jpg" name="10" /></a>
    
    </td><td>
    
    <a href="#" onclick="changephoto('listing_1_1164857864.jpg')"><img src="listing_1_1164857864.jpg" border="0" id="listing_1_1164857864.jpg" name="11" /></a>
    
    </td>
    </tr>
    </table>
    The javascript:

    Code:
    function changephoto(photo) {
        var colour_b = document.getElementById(photo).name;
        var select1 = document.getElementById('select[1]');
    
        select1.selectedIndex = colour_b;
        return;
    }
    Basically how it works is, there are two photos. When you click on one of the photos, it updates the selection form and changes the selected option to the correct value which is specified in the name of the photo.

    I've removed a bit of code from the function so that it doesn't confuse you. I've left what is necessary.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    selectedIndex

    Yeah I had this problem as well. The issue is that selectedIndex will ONLY accept an integer value as a 'setter' AND it must be an integer value that points to an option.

    The options are numbered in order from 0 to n-1, where n is the number of options. So if you want the 3rd item in the list, you use select_element.selectedIndex = 2.

    Looking at your code, I suspect you just need to subtract 9 from your colour_b variable. Ie,

    Code:
    function changephoto(photo) {
        var colour_b = document.getElementById(photo).name;
        var select1 = document.getElementById('select[1]');
    
        select1.selectedIndex = colour_b - 9;
        return;
    }
    Dave

  5. #5
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dave... The only problem is the drop down option values are automatically generated so they will be different numbers on different pages. The script I am using this code is a shopping cart and it generates the drop downs automatically...

    Is there any other way? Or is the only other way is to make the values names instead of integers?

  6. #6
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just had a good look at your code and realised your first example still uses selectedIndex... Is there anyway to select an option according to it's name instead of it's selectedIndex?

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, you can loop through the options in a <select> and check for one with a certain property set to a certain value and then set its selected property to true.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately I do not know how to do what you have suggested. Do you know of any tutorials that could assist me? If you give me a keywords for the above I can do a search in Google...

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should do it.
    Code:
    function setSelectedOption(theSelectId,theValue) {
    	var opts = document.getElementById(theSelectId).options;
    	for (var i=0; i < opts.length; i++) {
    		if (opts[i].value == theValue) {
    			opts[i].selected = true;
    			break;
    		}
    	}
    }
    
    function changephoto(photo) {
    	var colour_b = document.getElementById(photo).name;
    	setSelectedOption('select[1]',colour_b);
    }


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
  •