Link to home
Start Free TrialLog in
Avatar of Wayne Barron
Wayne BarronFlag for United States of America

asked on

Dynamic ComboBox (Cannot choose already used values)

Hello All;

I have several dynamic combobox's on a page.
It can range from 1 to 100.
OK.

Lets say that you have a form with 10 Dynamic Combo's
And the user chooses the following for their values.

Combo1   Value=7
Combo5   Value=4
Combo7   Value=2
Combo9   Value=10

Now, I need for the rest of the Combo's to NOT display the already used values.

This can be done either during (Which would be great to have it happen LIVE)
(or) When page loads.
I will leave it up to you all.
Avatar of JohnSixkiller
JohnSixkiller
Flag of Czechia image

Hi,
maybe something like this:
<script>
function manageOptions(Sender){
		var arSelectedValues = new Array();
		for(var i=1; i<=2; i++){
			var select = document.getElementById("select"+i);
			arSelectedValues.push(select.value);
		}
 
		for(var i=1; i<=2; i++){
			var select = document.getElementById("select"+i);
			if(select == Sender) continue;
 
			for(var j=1; j<select.options.length; j++){
				var isSelected = false;
				for(var x=0; x<arSelectedValues.length; x++){
					if(arSelectedValues[x] == select.options[j].value && select.options[j].value != select.value){
						isSelected = true;
						break;
					}
				}
				select.options[j].disabled = isSelected;
			}
		}
	}
</script>
 
<select id='select1' onchange='manageOptions(this)'>
    <option value="">-- choose --</option>
	<option value="1">1</option>
	<option value="2">2</option>
 <select>
 
 <select id='select2' onchange='manageOptions(this)'>
	<option value="">-- choose --</option>
	<option value="1">1</option>
	<option value="2">2</option>
 <select>

Open in new window

Avatar of sunithnair
sunithnair

Can you please clarify these points

Question 1 : Are the values going to be the same for all the comboboxes?
Question 2: Are the values and the text going to be the same in all the comboboxes?
Question 3: What will happen if a user selects a value in combo1 and then decides to select another value for the same combo (combo1)? Do the removed values (in other combos) to be repopulated back into the other comboboxes?
I have explained question 1 and question 2 below
Question 1 Are they going to be like this
 
<select name="combo1">
<option value="1">1</option>
<option value="2">2</option>
</select>
 
<select name="combo2">
<option value="1">1</option>
<option value="2">2</option>
</select>
 
Question 2 Are the going to be like this?
 
<select name="combo1">
<option value="1">One</option>
<option value="2">Two</option>
</select>
 
<select name="combo2">
<option value="1">One</option>
<option value="2">Two</option>
</select>

Open in new window

Avatar of Wayne Barron

ASKER

JohnSixKiller.

Where i run your code within' my site, I get the following error
 [Object Required] on this line:
====================================
arSelectedValues.push(select.value);
====================================

sunithnair:
#1: 1 - 10 (Will be available for all Combo'x but only up to 10 items can be choosen at a given time)
#2: #'s not Text
#3: When the user selects their item, they will not be changed UNLESS they are updating them.
BUT, the condition of the other fields will not change, unless they choose to change them.
So:
If   combo1 - changed from: [5]  to  [8]
if   combo2 - was [8]
Then the user HAS to change it before submitting, or get an error that he/she has duplicate values.
Upon clicking th esubmit button.

They were some good questions [sunithnair]
Should have thought about them and posted with the original question.
I need some more clarification on the 3rd answer you gave me. When the user chooses 5 in combo1 we would have removed 5 from all other combos so after the user changes the value to 8 in combo1 then he will not have 5 again. My question was do we pupulate back 5 to other combos
yes - we would populate the [#] back that is no longer used.
I am sorry, I totally misunderstood what you were asking.

Yes, the numbers would be repopulated back into the others
Try, this complete page. Tested in FF,IE8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
	<head>	
		<script type='text/javascript'>
			function manageOptions(Sender){
                var arSelectedValues = new Array();
                for(var i=1; i<=2; i++){
                        var select = document.getElementById("select"+i);
                        arSelectedValues.push(select.value);
                }
 
                for(var i=1; i<=2; i++){
                        var select = document.getElementById("select"+i);
                        if(select == Sender) continue;
 
                        for(var j=1; j<select.options.length; j++){
                                var isSelected = false;
                                for(var x=0; x<arSelectedValues.length; x++){
                                        if(arSelectedValues[x] == select.options[j].value && select.options[j].value != select.value){
                                                isSelected = true;
                                                break;
                                        }
                                }
                                select.options[j].disabled = isSelected;
                        }
                }
			}
		</script>
	</head>
	<body>
		<select id='select1' onchange='manageOptions(this)'>
			<option value="">-- choose --</option>
				<option value="1">1</option>
				<option value="2">2</option>
		</select>
		<select id='select2' onchange='manageOptions(this)'>
				<option value="">-- choose --</option>
				<option value="1">1</option>
				<option value="2">2</option>
		</select>
	</body>
</html>

Open in new window

Try this. I have not implemented the 3rd part (repopulating the values again). That might take some time so i thought to post this now
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function removeOptions(src)
{
    var selectBoxes = document.getElementsByTagName("select");
    for(var i=0;i<selectBoxes.length;i++)
    {
        if(src.id != selectBoxes[i].id)
        {
            for(var j=1;j<selectBoxes[i].options.length;j++)
            {
                if(src.options[src.selectedIndex].value == selectBoxes[i].options[j].value)
                {
                    selectBoxes[i].remove(j);
                }
            }
        }
    }
}
</script>
</head>
<body> 
<select id='select1' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select2' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select3' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select4' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select5' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select6' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select7' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select8' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select9' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select10' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
</body>
</html>

Open in new window

JohnSixkiller:
I do not really understand what your code is suppose to be doing?
I can choose either number (or) choose the Same Number.
That is not what I am needing.

=============
sunithnair:
I love your code, works great.
Catn't wait until you can get the rest of it working.
So I can see it working in a real live page.
sunithnair:
I love your code in your example.
BUT in a Dynamic situation (Which is what I have here)
It does not work.

As the title states: Dynamic ComboBox
1 to 100 will display on the page, depending on how many record are returned.
And when I use your code within the project, it dies, does not work.

This is what my Select looks like
<select name="order<%=row%>" style="font: 8pt verdana;" onChange="manageOptions(this)" onblur="removeOptions(this)">

The order<%=row%>"
Gives each Combo a unique number.

Anyway.
Any idea's on making the code work in a dynamic invironment?
Here is the finished version. This works fine in IE but breaks in firefox because in firefox onblur is called before onfocus.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
    var currentItem = null;
    var currentItemSelectedValue = null;
    function removeOptions(src) {
        var selectBoxes = document.getElementsByTagName("select");
        for (var i = 0; i < selectBoxes.length; i++) {
            if (src.id != selectBoxes[i].id) {
                for (var j = 1; j < selectBoxes[i].options.length; j++) {
                    if (src.options[src.selectedIndex].value == selectBoxes[i].options[j].value) {
                        selectBoxes[i].remove(j);
                    }
                }
            }
        }
        if (currentItem != null && src.selectedIndex > 0 && src.options[src.selectedIndex].value != currentItemSelectedValue) {
            //alert(src.options[src.selectedIndex].value + " " + currentItemSelectedValue);
            var selectBoxes = document.getElementsByTagName("select");
            for (var i = 0; i < selectBoxes.length; i++) {
                if (src.id != selectBoxes[i].id || src.id != currentItem.id) {
                    var objOption = document.createElement("option");
                    objOption.text = currentItemSelectedValue;
                    objOption.value = currentItemSelectedValue;
                    try {
                        selectBoxes[i].options.add(objOption, null);                        
                    }
                    catch (ex) {
                        selectBoxes[i].options.add(objOption);
                    }
                }
            }
            //currentItem = null;
            //currentItemSelectedValue = null;
        }
    }
    function setCurrent(src) {
        if (src.selectedIndex > 0) {
            currentItem = src;
            currentItemSelectedValue = src.options[src.selectedIndex].value;
        }
        else {
            currentItem = null;
            currentItemSelectedValue = null;
        }
    }
</script>
</head>
<body> 
<select id='select1' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select2' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select3' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select4' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select5' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select6' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select7' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select8' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select9' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<br /> 
<select id='select10' onfocus='setCurrent(this)' onblur='removeOptions(this)'>
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
</body>
</html>

Open in new window

I have not added any onchange event in my code and your select box should look like this
<select name="order<%=row%>" id="order<%=row%>" style="font: 8pt verdana;" onblur="removeOptions(this)">
    <option value="0">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

Open in new window

I hate it when I am going blindly into trying to help someone solve something,
So I am not going to do it to ya either.

This is the page
http://www.pcitdad.com/Test/EE/Q_24140255/Choose.asp?pid=1
This has your code in it.
This is the Code
http://www.pcitdad.com/Test/EE/Q_24140255/Q_24140255.zip

This way you will be able to really test it out.

Have a good one.
Carrzkiss
ASKER CERTIFIED SOLUTION
Avatar of sunithnair
sunithnair

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
What exactly you cant undestand? If you select Item (Number) from any ComboBox it disable this item in other combos (only next one in this example). So it cannot be selected.
I tested out your code John, and I selected the first combo #
And it was still available in the 2nd combo.
What [sunithnair] has come up with is more along the lines of what I am needing.

Sorry if I offended you John, but it is not what I am needing.
That is where the "do not understand" came in at.
I just really do not understand how to use your code.

===========
sunithnair;
I am going to test your code here in a few.
I never had an ID on the combo's
They get there information from their Name="row"

I will get back with you in a few once I have tested.
Awesome work!
Thank you for your time, and sorry about the Select's not having an ID.
You rock.

If I ever need anything else done with Javascript, I will let you know.

have a good Valentines, and may you day rock as well as your code does.

Wayne
sunithnair:
Thanks a bunch.
The ID was what did it. And the fact that you got it to work with Firefox will make it that much
More powerful.

Thank again.
Keep up the awesome coding.

Carrzkiss
No problem mate.. and thanks for the wishes :) same to you too..