Compare drop-down so only one of each choice is used? 2

DVDGirl · Oct 27, 2003

A user needs to order items in order of their preference.
So for example, I have three shirts: blue, red, and yellow. The user has to pick the order of their preference.

1 - Blue
2 - Red
3 - Yellow

Each drop-down has the options of 1, 2, and 3. Is there a way to check to make sure that they only picked a combination of 1, 2, and 3 (not 1,1,1 or 2,1,1 etc.)?

Please let me know if anyone has any suggestions. Thanks!

By the way, I'm also using ASP (if that is any help.)

-DVD Girl

byam · Oct 27, 2003

here is a sample code I just came up with.

Code:

<html>
<head>
<script language=&quot;javascript&quot;>
var choices = new Array('red', 'blue', 'yellow');

function initChoice() {
  var theFrom = document.forms['color'];
  for (var i = 0; i < choices.length; i++) {
    theFrom.choice1.options[i] = new Option(choices[i]);
    theFrom.choice1.options[i].value = choices[i];
  }
  theFrom.choice1.selectedIndex = 0;
  populateChoices(2);
}

var numChoices = 3;
function populateChoices(rank) {
  for (var i=rank; i<=numChoices; i++) {
    var options = eval(&quot;document.forms['color'].choice&quot;+i+&quot;.options&quot;);
    for (var j = 0; j < options.length; j++) {
      options[i] = null;
    }
  }
  for (var i=rank; i<=numChoices; i++) {
    var index = 0;
    var options = eval(&quot;document.forms['color'].choice&quot;+i+&quot;.options&quot;);
    for (var j = 0; j < choices.length; j++) {
      if (notSelected(choices[j], i)) {
          options[index] = new Option(choices[j]);
          options[index++].value = choices[j];
      }
    }
  }
}

function notSelected(choice, rank) {
  var result = true;
  for (var i=1; i<rank; i++) {
    if (eval(&quot;document.forms['color'].choice&quot;+i+&quot;.value&quot;)== choice) {
        result = false;
    }
  }
  return result;
}

</script>
</head>

<body onload=&quot;initChoice()&quot;>
 
<form name=&quot;color&quot;>
<select name=&quot;choice1&quot; onchange=&quot;populateChoices(2)&quot;><option>--</option></select><br />
<select name=&quot;choice2&quot; onchange=&quot;populateChoices(3)&quot;/><option>--</option></select><br />
<select name=&quot;choice3&quot;/><option>--</option></select><br />
</form>

</body>

</html>

DVDGirl · Oct 28, 2003

Hi byam -
Thank you for your prompt response! Your code works perfectly, however, it's not exactly what I'm looking for. I really want to use numbers (instead of colors). And the code won't work, if say, I wanted to pick the third choice as #1.

I'm open to any other recommendations you have. Thank you!

CrimsonDiva · Sep 17, 2004

Hey DVDGirl,

Did you ever get an answer to your question? I want to implement the same thing!

Diva [glasses]

LFI · Sep 17, 2004

Diva,

Here's a little something:

Code:

<html>
<head>
<script>
[b]//put the document's SELECT objects into an global var/array.  grabSelects() is called with the BODY tag's ONLOAD event.[/b]
var selects;
function grabSelects()
{
 selects = document.getElementsByTagName("SELECT");
}

[b]//build a string of the SELECT objects selected indexes.  A duplicate selection will be easily detectable.  An example of a 'valid' indexString would be *2**1**3*.  There are asterisks to both sides of each index as it is added.  This allows for expandability to a number of SELECTs greater than 9.[/b]
function compare(obj)
{
 var indexString = "";
 for(var i=0; i<selects.length; i++)
 {
  if(selects[i].selectedIndex != -1 && indexString.indexOf("*"+selects[i].selectedIndex+"*") == -1)
   indexString += "*"+selects[i].selectedIndex+"*";
  else if(indexString.indexOf("*"+selects[i].selectedIndex+"*") != -1)
  {
   alert("You must select a unique value for each dropdown.");
   obj.selectedIndex = -1;
  }
 }
}
</script>
</head>
<body onload='grabSelects();'>
<form name='form1'>
BLUE:<select name='blue' onchange='compare(this);'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select> 
<script>
[b]//initialize each dropdown to selectedIndex of -1[/b]
document.form1.blue.selectedIndex=-1;
</script>
 RED:<select name='red' onchange='compare(this);'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select> 
<script>document.form1.red.selectedIndex=-1;</script>
 YELLOW:<select name='yellow' onchange='compare(this);'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select> 
<script>document.form1.yellow.selectedIndex=-1;</script>
</form>
</body>
</html>

Let me know if that's what you're after or if you have any questions. I'm not 100% sure that getElementsByTagName is cross-browser compatible. I'm using IE6.

--Dave

CrimsonDiva · Sep 17, 2004

Thanks LookingForInfo! [2thumbsup]

It worked like a charm!

Diva [glasses]

DVDGirl · Dec 22, 2004

Thank you for posting, LookingForInfo!

I'm not very JavaScript savvy, so I was wondering how you would tweak the code for multiple groups of drop-down boxes...

If you have any suggestions, I'd be happy to hear them! Thank you!

-DVD Girl

DVDGirl · Dec 23, 2004

I finally solved it. Thank you to those who took time to read my dilemma.

For those interested, here is the code:

Code:

<script>
//build a string of the SELECT objects selected indexes.  A duplicate selection will be easily detectable.  An example of a 'valid' indexString would be *2**1**3*.  There are asterisks to both sides of each index as it is added.  This allows for expandability to a number of SELECTs greater than 9.
function compare(obj,checkStart,checkEnd)
{
 var indexString = "";
 for(var i=checkStart; i<checkEnd; i++)
 {
  var selects = document.workshops.elements
  if(selects[i].selectedIndex != -1 && indexString.indexOf("*"+selects[i].selectedIndex+"*") == -1)
   indexString += "*"+selects[i].selectedIndex+"*";
  else if(indexString.indexOf("*"+selects[i].selectedIndex+"*") != -1)
  {
   alert("Your order of preference for each workshop must be 1, 2, 3, 4, or 5, with each number used only once.");
   obj.selectedIndex = -1;
  }
 }
}
</script>

.
.
.

The select boxes would have this code:
<select name='blue' onchange='compare(this,0,5);'>
...
<select name='red' onchange='compare(this,5,10);'>

(Say I have two groups of 5 drop-down boxes. 0 is the first select box (or first element) on the form. 9 would be the last select box (or tenth element).)

Thanks again to LookingForInfo for assisting me the solution!

~DVD Girl

anthonyplanet · Jan 4, 2005

i used LookingForInfo's code and it did exactly what i needed. The only problem is that when i add it to a page that uses other select boxes the prompt is alerted at the wrong times. Any thoughts?

thanks
A

LFI · Feb 1, 2005

Let's say you know the names of the SELECT lists you do NOT want to include in the logic. Change this:

Code:

var selects;
function grabSelects()
{
 selects = document.getElementsByTagName("SELECT");
}

...to this:

Code:

var allSelects;
var selects = new Array();
//knownNames is the array of SELECT list names
// that are not required to adhere to the
// rule that insists no two SELECTS can 
// have the same value selected.
var knownNames = {'selectList1', 'selectsList2'};
function grabSelects()
{
 [b]allSelects[/b] = document.getElementsByTagName("SELECT");
 for(var i=0; i<allSelects.length; i++)
 {
  var addToSelects = true;
  for(var j=0; j<knownNames.length; j++)
  {
   if(allSelects[i].name == knownNames[j])
   {
    addToSelects = false;
    break;
   }//end if
  }//end for

  if(addToSelects)
   selects[selects.length] = allSelects[i];
 }//end for
}//end grabSelects()

'hope that helps. I haven't tested it.

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Compare drop-down so only one of each choice is used? 2

DVDGirl

Programmer

byam

Programmer

DVDGirl

Programmer

CrimsonDiva

Programmer

LFI

Programmer

CrimsonDiva

Programmer

DVDGirl

Programmer

DVDGirl

Programmer

anthonyplanet

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor