www.webdeveloper.com
Results 1 to 11 of 11

Thread: [RESOLVED] Adding Options to a Select Box

  1. #1
    Join Date
    Jul 2010
    Posts
    34

    resolved [RESOLVED] Adding Options to a Select Box

    I've searched the web and every tutorial I can find says the same thing, and I am doing what they say, but it's inexplicably not working.

    Basically, I'm using a nested object to populate a select box using the new Option() method. Unfortunately, when I include the new Option line, it breaks the loop and does not add anything...

    HTML Code:
    // note: mySelectBox = document.new_issue.upgradeid;
    
    // clear select box
    mySelectBox.length = 0;
    
    // and re-populate...
    for (var key in upgradeprogArray[myGame])
    {
    	var currentIndex = mySelectBox.length;
    	var currentValue = upgradeprogArray[myGame][key];
    	
    	if (currentValue != '')
    	{
    		alert('mySelectBox.option['+ currentIndex +'] = new Option('+ currentValue +', '+ key +')');
    	//	mySelectBox.option[currentIndex] = new Option(currentValue, key);
    	}
    }
    When this is run, it traces each item that it would have added and all the data passed to the alert box is accurate.

    Unfortunately, when that last line is NOT commented out, it only executes the loop once and then breaks without adding any options to my select box.

    Any ideas?

  2. #2
    Join Date
    Jul 2010
    Posts
    34
    I even tried defining mySelectBox with getElementById, but to the same malfunctioning ends.

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    option is plural
    Code:
    mySelectBox.options[currentIndex]

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    for (var key in upgradeprogArray[myGame])
    If upgradeprogArray[myGame] is not an object (an unordered array), but an array, you should use the ordered for() loop (specific to the arrays), not an unordered loop (which in JavaScript is used for objects).
    Code:
    for(var i=0;i<upgradeprogArray[myGame].length;i++)
    The reason is simple. In JavaScript all the elements, variables, etc are objects. Native objects have a lot of native properties. An Array is also an object, and, besides his elements (which are custom properties), it has some other "technical", native properties, such as length. An unordered loop will include those native properties along the elements, which is not what you need.

  5. #5
    Join Date
    Jul 2010
    Posts
    34
    omg the solution was actually something simple ><;;

    Moral: check syntax carefully -_-

    Thank you, Fang, I really appreciate it.

    If you've got a moment, I'm completely stumped with another problem over in another thread: Very simple method doesn't work reliably. I hope more eyes may see something I missed.

  6. #6
    Join Date
    Jul 2010
    Posts
    34
    Quote Originally Posted by Kor View Post
    If upgradeprogArray[myGame] is not an object (an unordered array), but an array, you should use the ordered for() loop (specific to the arrays), not an unordered loop (which in JavaScript is used for objects).
    With the addition of the missing s on options, the scrips works perfectly.

    I tried defining upgradeArray as an object using both these methods:

    Method 1:
    HTML Code:
    var object = 
    {
    	'category1' : {'index1' = 'value', 'index2' = 'value', etc...},
    	'categroy2' : {etc...}
    };
    Method 2:
    HTML Code:
    var object = {};
    object['category1'] = {};
    object['category1']['index1'] = 'value';
    object['category1']['index2'] = 'value';
    etc...
    But the script refused to recognize it and it was behaving like my other script, where it just doesn't do anything if I try to reference the object.

    The only way I could get it to work is with this:
    HTML Code:
    var array = new Array();
    array['categroy1'] = new Array();
    array['categroy1']['index1'] = 'value';
    array['categroy1']['index2'] = 'value';
    etc...

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You still confound arrays with objects

    Method 1
    Code:
    var object = 
    {
    	'category1' : {'index1' = 'value', 'index2' = 'value', etc...},
    	'categroy2' : {etc...}
    };
    Should be:
    Code:
    var object = 
    {
    	'category1' : {'index1': 'value', 'index2': 'value', etc...},
    	'categroy2' : {etc...}
    };
    Method 2 should work, I don't see why not.

    Method 3 is not quite good, as you set a variable (array['categroy1']) as an Array, but you try to construct it as an Object.
    Last edited by Kor; 07-30-2010 at 05:24 AM.

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Arrays:
    Code:
    //Method 1
    var array=['value1','value2','value2'];
    //Method 2
    var array=[];
    array[0]='value1';
    array[1]='value1';
    array[2]='value1';
    Objects:
    Code:
    //Method 1
    var object={'key1':'value1','key2':'value2','key3':'value3'};
    //Method 2
    var object={};
    object['key1']='value1';
    object['key2']='value2';
    object['key3']='value3';

  9. #9
    Join Date
    Jul 2010
    Posts
    34
    that was my typo as I re-wrote what I tried before.

    that third method I posted is working.

    On the other hand, I gave the method 1 object another try and it seems to work as well. it just requires a lot more lines than what I'm using.

    this:
    PHP Code:
    $js_content.= "
                var upgradeprogArray = 
                {"
    ;
    end($upgradeprogArray);
    $lastGame current($upgradeprogArray);
    foreach (
    $upgradeprogArray as $game => $subArray)
    {
        
    $js_content.= "
                    \""
    .$game."\" : 
                    {"
    ;
        
        
    end($subArray);
        
    $lastVal current($subArray);
        foreach (
    $subArray as $key => $val)
        {
            
    $js_content.= "
                        \""
    .$key."\" : '".mysql_real_escape_string($val)."'";
            
    $js_content.= ($val != $lastVal)? "," "";
        }
        
    $js_content.= "
                    }"
    ;
        
    $js_content.= ($game != $lastGame)? "," "";
    }

    $content.= "
                }; 
    HTML Code:
    			var upgradeprogArray = 
    			{
    				'game1' :
    				{
    					'key' : 'val',
    					'key' : 'val',
    					etc...
    				},
    				'game2' :
    				{
    					'key' : 'val',
    					etc...
    				}
    			};
    as opposed to this (which works):
    PHP Code:
    $js_content.= "
                var upgradeprogArray = new Array();"
    ;
    foreach (
    $upgradeprogArray as $game => $subArray)
    {
        
    $js_content.= "
                upgradeprogArray[\""
    .$game."\"] = new Array();";
        
        foreach (
    $subArray as $key => $val)
        {
            
    $js_content.= "
                upgradeprogArray[\""
    .$game."\"][\"".$key."\"] = '".mysql_real_escape_string($val)."';";
        }

    HTML Code:
    			var upgradeprogArray = new Array();
    			var upgradeprogArray['game1'] = new Array();
    			var upgradeprogArray['game1']['key'] = 'val';
    			var upgradeprogArray['game1']['key'] = 'val';
    			etc...
    			var upgradeprogArray['game2'] = new Array();
    			var upgradeprogArray['game2']['key'] = 'val';
    			etc...

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Which is more important: To write a few extra code lines? Or to use the correct syntax?

    Now: does, or does not your code work?

  11. #11
    Join Date
    Jul 2010
    Posts
    34
    Quote Originally Posted by Kor View Post
    Which is more important: To write a few extra code lines? Or to use the correct syntax?

    Now: does, or does not your code work?
    It's most important that my code work reliably.

    Being that these are 2 threads, I should point out that these problems are coming from 2 completely different files. Yes, they belong to the same project, but the errors are completely different.

    This problem was fixed when I added that missing s to "options"

    The other problem will be fixed as soon as I track down the source.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles