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 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer [Object Error] in Select.options Manipulation

    Hey guys, the following code takes a highlighted option from a select list and moves it up or down in the list according to the argument passed. Simple enough. It works exactly as expected in Fire Fox. However, in Internet Explorer it gives me [object error](object does not support that method) at the designated lines.

    Here's the code

    Code:
    /**********************************************************
    		moveUsedFields() takes the selected field moves it either
    	up or down depending on the argument
    	***********************************************************/
    function moveUsedFields(updown)
    {
    	var used_columns = document.getElementById("used_column_names");
    	var si = 0;
    	try{si = used_columns.options.selectedIndex;}catch(e){si = null;}
    
    	//alert(si);
    	try
    	{
    		if(used_columns.options[si] != null)
    		{
    			if(updown == "up"  &&  si>0)
    			{
    				var temp = used_columns.options[si-1];
    				var temp2 = used_columns.options[si];
    				used_columns.options[si-1] = temp2;///****this is the problem line******//
    				used_columns.options.add(temp,si);
    				used_columns.options.selectedIndex = si-1;
    			}
    			else if(updown == "down" && used_columns.options[si+1] != null)
    {
    			        var temp = used_columns.options[si+1];
    				var temp2 = used_columns.options[si];
    				used_columns.options[si+1] = temp2;
    				used_columns.options.add(temp,si);
    				used_columns.options.selectedIndex = si+1;
    			}
    
    
    			}
    		}catch(e){}
    
    	}
    I have tried to see if the contents of used_columns.options[si-1].value or temp2.value are valid, and they are the correct values. I'm kinda stumped here. I was hoping that someone that knows more details about how Internet explorer would interpret this script could clue me in. Failing that, does anyone know a website that i could read more about the methods that Internet Explorer does support for the select.option object?

    Thanks for your time reading this,

    -Q

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump, anyone know a good website? I've tried to google it, but not getting anything interesting yet.

    -Q

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    var temp2 = used_columns.options[si];
    used_columns.options[si-1] = temp2;///****this is the problem line******//
    just here the same object(option) is being forced into two locations in the select list.

    try using a clone or simpler
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function MoveOption(id,dir){
     var sel=document.getElementById(id);
     var opts=sel.options;
     var selopt=sel.selectedIndex
     for (var zxc0=0;zxc0<opts.length;zxc0++){
      if (zxc0==selopt&&((dir>0)&&(zxc0+dir<opts.length-1))||(dir<0&&zxc0>0)){
       var temp=[opts[zxc0].value,opts[zxc0].text]
       opts[zxc0].value=opts[zxc0+dir].value;
       opts[zxc0].text=opts[zxc0+dir].text;
       opts[zxc0+dir].value=temp[0];
       opts[zxc0+dir].text=temp[1];
       break;
      }
     }
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    <select id="Tst1" style="width:100px">
    <option value="" >1</option>
    <option value="" >2</option>
    <option value="" >3</option>
    <option value="" >4</option>
    <option value="" >5</option>
    <option value="" >6</option>
    </select>
    <input type="button" value="Move Up" onclick="MoveOption('Tst1',-1);" >
    <input type="button" value="Move Down" onclick="MoveOption('Tst1',1);" >
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, that was painful. It's kind of embarrassing to say how much time I spent on this one. But at some point I just couldn't give up anymore.

    Anyway, near as I can tell the thing is that IE gets all upset if you try to have more than one version of the same option in the array. So the trick is once the option has been pulled in to the temp variable that you set that spot in the array to null which actually deletes it from the array.

    Code:
    <html>
      <head>
        <title>Junque</title>
        <script type="text/javascript">
    function moveUsedFields(updown)
    {
      var used_columns = document.getElementById("used_column_names");
      var si = 0;
      try{si = used_columns.options.selectedIndex;}catch(e){si = null;}
    
      try
      {
        if(used_columns.options[si] != null)
        {
          if(updown == "up"  &&  si>0)
          {
            var temp = used_columns.options[si];
            var temp2 = used_columns.options[si-1];
            used_columns.options[si] = null;
            used_columns.options[si-1] = null;
            used_columns.options.add(temp2,si-1);
            used_columns.options.add(temp,si-1);
            used_columns.selectedIndex = si-1;
          }
          else if(updown == "down" && used_columns.options[si+1] != null)
          {
            var temp = used_columns.options[si+1];
            var temp2 = used_columns.options[si];
            used_columns.options[si+1] = null;
            used_columns.options[si] = null;
            used_columns.options.add(temp2,si);
            used_columns.options.add(temp,si);
            used_columns.selectedIndex = si+1;
          }
    
    
          }
        }catch(e){}
    
      }
        </script>
      </head>
      <body>
        <div>
          <button onclick="moveUsedFields('up');">Up</button>
          <button onclick="moveUsedFields('down');">Down</button>
          <br />
          <select id="used_column_names" size="7">
            <option>Opt 1</option>
            <option>Opt 2</option>
            <option>Opt 3</option>
            <option>Opt 4</option>
            <option>Opt 5</option>
          </select>
        </div>
      </body>
    </html>
    Hopefully that helps. I learned more about select and options than I ever wanted to know. :)

    david_kw

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, that makes sense. I took the code home over the weekend, and didn't think to check back on the forums. Here is the workaround code that I came up with independently that works for both firefox and pos IE. I hope this discussion is able to help someone else down the road, because this is a tremedously frustrating and subtle problem to troubleshoot.

    here is my workaround code.

    Code:
    	function moveUsedFields(updown)
    	{
    		var used_columns = document.getElementById("used_column_names");
    		
    		try{var si = used_columns.options.selectedIndex;}catch(e){si = null;}
    
    		
    		try
    		{
    			if(used_columns.options[si] != null)
    			{
    				if(updown == "up"  &&  si>0)
    				{
    
    					var temp = used_columns.options[si-1].value;
    					temp = new Option(temp,temp);
    
    					var temp2 = used_columns.options[si].value;
    					temp2 = new Option(temp2,temp2);
    
    					used_columns.options[si-1] = temp2;
    					used_columns.options[si] = temp;
    					used_columns.options.selectedIndex = si-1;
    
    
    				}
    				else if(updown == "down" && used_columns.options[si+1] != null)
    				{
    
    
    					var temp = used_columns.options[si+1].value;
    					temp = new Option(temp,temp);
    
    					var temp2 = used_columns.options[si].value;
    					temp2 = new Option(temp2,temp2);
    
    					used_columns.options[si+1] = temp2;
    					used_columns.options[si] = temp;
    					used_columns.options.selectedIndex = si+1;
    
    				}
    
    
    			}
    		}catch(e){alert(e);}
    
    	}
    Thanks to the previous posters for there explanation of the underlying issue.

    -Q


  •  

    Posting Permissions

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