link combo boxes 4

[jman78]

I have 3 dropdown combo boxes. They all have the same options.

I just want to update the second and third ones to remove the options that are already chosen.

I've tried working out a solution I found on google, but that is made for seperate datasets and I couldn't get it to work.

Any help with this? I don't know javascript very well - so this has proven to be a giant PITA for me.

Thanks

Jason

 

[vacunita]

function remove_option(sel_box){
var myboxes=new Array();
[green]\\Get all drop downs[/green]
myboxes[1]=document.getElementById('box1');
myboxes[2]=document.getElementById('box2');
myboxes[3]=document.getElementById('box3');
[green]\\Get length of drop downs[/green]
var opt_cnt=sel_box.options.length;
[green]\\Get index of selected option in used drop down.[/green]
var ind=sel_box.selectedIndex;
[green]\\Loop through drop downs and disable selected options[/green]
for(var j in myboxes){
	  if(myboxes[j].name!=sel_box.name){
myboxes[j].options[ind].disabled=true;
}
}
}

Call the function in the onChange event of each drop down.


You may also provide a button to clear all selections and enable all disabled options to start over




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

Nice one, Phil... I've been doing this gig for ages, and I never thought to disable an OPTION element!

I've learned something new today - so have a star on me!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[vacunita]

Thanks. I chose to disable it, because I just couldn't think of a way to recover the deleted elements if the user decides to select other options.

So disabling seemed like a good alternative.

That way, a quick run through all the dropdowns setting all their options.disabled to false enables them again, where as having deleted them you would probably need to keep the deleted options somewhere just so you could bring them back.

Which could become very complicated.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[jman78]

Awesome - its not working perfectly yet, but its due to this being coded in Ruby/Rails. The combo boxes in question are part of an array (name/id of 'variant[]' to create the object array). The elements are created through a database call. Great solution - I need to enable them all and then disable the proper one.

Thanks!

 

[parkers]

I would just like to comment as I've had similar thoughts / problems in the past as Jason, the solution you suggest is very clean and concise ... I will definently use this!

Thanks Phil!

Steven Parker

http://www.stevenp1974.co.uk

 

[vacunita]

Glad it worked for you too.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Einstein47]

You get a star from me as well.

[green]SORRY - Einstein gets on his soap box[/green]
Is it just me, or do Visual Basic programmers always refer to HTML select element as combo boxes? As far as I know, there is no "combo" box with HTML. You can create some mish-mash with a text input and a select and a fair bit of DHTML, but it just irritates me when developers call them "combo" boxes. It is like they really would rather be doing Visual Basic, and HTML is so demeaning, degrading, and common. Let's just see how many Visual Basic developers are left in 10 years.

[green]SORRY - Einstein gets off his soap box[/green]

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“

 

[vacunita]

They do. And its not just Visual Basic, any visually oriented programming language (Delphi, Visual varieties of C etc..) has this very interesting element that usually incorporates a text input in a drop down to add your own option. Commonly referred to as a Combo Box.
Yes its definitely a misnomer and also may lead to confusion.
And most programmers that come from Visual desktop programming languages do this.

But mostly its a Microsoft naming convention.

I'm more irritated though when people use the term Datagrid in Web development. As this is also a VPL concept carried onto ASP, where in the IDE produces an HTML table with results from a query to a DB table.

Its misleading and tends to confuse people more than actually help them. As they think datagrid is an actual HTML element.

But I'm getting away form the subject at hand, sorry about that.

Back to the point of this post:

Thanks for the star Einstein.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[jman78]

Einstein47 -

Yes, VB6 was one of my early languages. Started on BASIC, moved up to Pascal/TurboPascal. Then learned VB6 in college, followed that up with C++, C# and Java. Since then I've programmed in Ruby, PHP, Python and a tiny little bit of Perl. I get your point, I tend to say 'select' but type 'combo'... I'll try to straighten that bit out.

Jason

Just if anyone is curious, after a couple days of playing with the code, I ended up with the following:

It mostly works correctly - Any suggestions that will streamline it or cause it to function better are welcome.

 Variations Types: <br />
         <label for="variants0">Option 1:</label><select id="variants0" name="variants0" onChange="update_dd(this);"></select><br />
         <label for="variants1">Option 2:</label><select id="variants1" name="variants1" onChange="update_dd(this);"></select><br />
         <label for="variants2">Option 3:</label><select id="variants2" name="variants2" onChange="update_dd(this);"></select><br />

          <script language="JavaScript" type="text/javascript">
          <!--
         //Initialize first select element  
          var split_types=new Array("", "Size", "Color", "Team", "Player", "Material", "Type", "Flavor");
          var select_fields=new Array("variants0","variants1","variants2");
          for (var i=0; i<split_types.length; i++){ document.newClassifiedForm.variants0.options[document.newClassifiedForm.variants0.options.length] = new Option(split_types[i], split_types[i]); }

          function update_dd(dropdown) {
            var split_types=new Array("", "Size", "Color", "Team", "Player", "Material", "Type", "Flavor");
           
            theForm = dropdown.form;
            
            var temp_select_fields = select_fields;
            var temp_split_types = split_types;
            
            var temp_variant0 = document.newClassifiedForm.variants0.value; 
            var temp_variant1 = document.newClassifiedForm.variants1.value; 
            var temp_variant2 = document.newClassifiedForm.variants2.value; 
            
            temp_split_types.splice(temp_split_types.indexOf(dropdown.value), 1);

            if (dropdown.name == "variants0") { 
              var opt1 = document.newClassifiedForm.variants1.options;
              var opt2 = document.newClassifiedForm.variants2.options;
              opt1.length = 1;
              opt2.length = 1;
              for (var j=1; j<temp_split_types.length; j++) {
                if ((temp_split_types[j] != temp_variant0) || ((temp_split_types[j] != temp_variant1) || (temp_split_types[j] != temp_variant2))) { 
                  opt1[j] = new Option(temp_split_types[j], temp_split_types[j]);  
                  opt2[j] = new Option(temp_split_types[j], temp_split_types[j]);  
                }
              }
              document.newClassifiedForm.variants1.value = temp_variant1;  
              document.newClassifiedForm.variants2.value = temp_variant2; 

              if (document.newClassifiedForm.variants2.value != "") { document.newClassifiedForm.variants1.remove(document.newClassifiedForm.variants2.selectedIndex); }
            }
            if (dropdown.name == "variants1") { 
              var opt1 = document.newClassifiedForm.variants0.options;
              var opt2 = document.newClassifiedForm.variants2.options;
              opt1.length = 1;
              opt2.length = 1;
              for (var j=1; j<temp_split_types.length; j++) {
                if (temp_split_types[j] != temp_variant1) {
                  if (temp_split_types[j] != temp_variant0) {
                      opt2[j] = new Option(temp_split_types[j], temp_split_types[j]);
                    }
                  if (temp_split_types[j] != temp_variant2) {
                    opt1[j] = new Option(temp_split_types[j], temp_split_types[j]);
                  }
                  }
              }    
              document.newClassifiedForm.variants0.value = temp_variant0;  
              document.newClassifiedForm.variants2.value = temp_variant2;  
              document.newClassifiedForm.variants2.remove(document.newClassifiedForm.variants0.selectedIndex);
            }
            
            if (dropdown.name == "variants2") { 
              var opt1 = document.newClassifiedForm.variants0.options;
              var opt2 = document.newClassifiedForm.variants1.options;
              opt1.length = 1;
              opt2.length = 1;
              for (var j=1; j<temp_split_types.length; j++) {
                if ((temp_split_types[j] != temp_variant2) || ((temp_split_types[j] != temp_variant1) || (temp_split_types[j] != temp_variant0))) { 
                  opt1[j] = new Option(temp_split_types[j], temp_split_types[j]);  
                  opt2[j] = new Option(temp_split_types[j], temp_split_types[j]);  
                }
              }
              document.newClassifiedForm.variants0.value = temp_variant0;  
              document.newClassifiedForm.variants1.value = temp_variant1; 
              document.newClassifiedForm.variants0.remove(document.newClassifiedForm.variants1.selectedIndex);
              document.newClassifiedForm.variants1.remove(document.newClassifiedForm.variants0.selectedIndex);
            }
            
          }
  
          //-->
        </script>

 

[Einstein47]

Sorry to be such a PITA - but I had a bad day and just needed to vent - sorry to take it out on you jman. I didn't mean to be a jerk.

I appologize!

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“