/    Sign up×
Community /Pin to ProfileBookmark

Populated Combo Boxes

Copy linkTweet thisAlerts:
Nov 22.2004

I am creating a survey. It is located at [url]http://www.advanced1.net/Marketing/MRS.htm.[/url] Question 5 is one of my issues. I have 8 different combo boxes, each with the same menu selections. If you choose the first selection in the first combo box than that selection should be disabled in the other combos. So if you choose the third selection in the second combo than the third selection should be disabled in combo boxes 3 thru 8. etc. etc.

This is fairly urgent so any help would be greatly appreciated. Thanks George

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@ai3rulesNov 22.2004 — I am guessing you only want people selecting from 5 of the 7 (I only see 7 at question 5) combo boxes then?
Copy linkTweet thisAlerts:
@Warren86Nov 22.2004 — <HTML>

<Head>

<Script Language=JavaScript>

var optionText = "Most Important,Imporant,Kind of,Not Very,Least Imporant "
optionText = optionText.split(",")
var nLists = 4; // number of select lists
var priorClip = false;

function restoreOptions(){

for (i=1; i<nLists+1; i++)
{
isList = document.getElementById(i);
isList.options.length = 1;
}
for (i=1; i<nLists+1; i++)
{
isList = document.getElementById(i);
for (n=0; n<5; n++)
{
isData = new Option(optionText[n],optionText[n]);
isList.add(isData,isList.options.length)
}
}
priorClip = false;
}

function clipOptions(List,Opt){

index = parseInt(List)+1;
for (index; index<nLists+1; index++)
{
isList = document.getElementById(index);
isList.selectedIndex = Opt;
isList.remove(isList.selectedIndex);
isList.selectedIndex = 0;
}
priorClip = true;

}

function editOptions(isList,isChoice){

if (priorClip == true && isList == 1 && isChoice == 0)
{restoreOptions()}
if (priorClip == false && isList == 1 && isChoice != 0)
{
List = isList;
nOpt = isChoice;
clipOptions(List,nOpt)
}
if (priorClip == true && isList != '1')
{
List = isList;
nOpt = isChoice;
clipOptions(List,nOpt)
}
}

</Script>

</Head>

<Body>

<center>

<br><br>

<select id='1' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

<select id='2' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

<select id='3' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

<select id='4' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

</center>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@jacksonbillyauthorNov 24.2004 — Thanks for the reply Warren. I made a minor mistake in my previous post. It is supposed to be seven drop down menus, with seven selections in each drop down. I figured out how to add more. The script you wrote is great. I hope I can ask for one adjustment. Can you have it were if you picked the third combo box first the rest of the combo boxes would update? I think right now it updates if you only go in order from top to bottom.

Thanks,

George
Copy linkTweet thisAlerts:
@Warren86Nov 24.2004 — Change every instance of :

isList == 1 or isList != 1

to:

isList == 3 or isList != 3
Copy linkTweet thisAlerts:
@jacksonbillyauthorNov 24.2004 — well, I think I did what you asked but I'm not sure what it did. You can pick any selection from any of the drop down boxes except for the first and then you can pick that same selection in any of the other drop down boxes except for the first. Once you do that and go back to the first drop down box and pick that same selection it resets the other combos, and sometimes kicks back an error. I don't think users will be picked the first first box then the second and so forth. I would pick the one that ranks first, the move to second runner up and so on.

Here is your code:

<HTML>

<Head>

<Script Language=JavaScript>

var optionText = "Most Important,Imporant,Kind of,Not Very,Least Imporant "

optionText = optionText.split(",")

var nLists = 4; // number of select lists

var priorClip = false;

function restoreOptions(){

for (i=1; i<nLists+1; i++)

{

isList = document.getElementById(i);

isList.options.length = 1;

}

for (i=1; i<nLists+1; i++)

{

isList = document.getElementById(i);

for (n=0; n<5; n++)

{

isData = new Option(optionText[n],optionText[n]);

isList.add(isData,isList.options.length)

}

}

priorClip = false;

}

function clipOptions(List,Opt){

index = parseInt(List)+1;

for (index; index<nLists+1; index++)

{

isList = document.getElementById(index);

isList.selectedIndex = Opt;

isList.remove(isList.selectedIndex);

isList.selectedIndex = 0;

}

priorClip = true;

}

function editOptions(isList,isChoice){

if (priorClip == true && isList == 3 && isChoice == 0)

{restoreOptions()}

if (priorClip == false && isList == 1 && isChoice != 0)

{

List = isList;

nOpt = isChoice;

clipOptions(List,nOpt)

}

if (priorClip == true && isList != '3')

{

List = isList;

nOpt = isChoice;

clipOptions(List,nOpt)

}

}

</Script>

</Head>

<Body>

<center>

<br><br>

<select id='1' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

<select id='2' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

<select id='3' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

<select id='4' onChange="editOptions(this.id,this.selectedIndex)">

<option selected>Make a selection</option>

<option value='Most important'>Most important</option>

<option value='Important'>Important</option>

<option value='Kind of'>Kind of</option>

<option value='Not very important'>Not very important</option>

<option value='Least important'>Least important</option>

</select><br><br>

</center>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@Warren86Nov 24.2004 — I have nothing further to offer. I won't go down this road with you. Your project. Your responsibility. The code I provided does what you initially requested. End of the road for me.
Copy linkTweet thisAlerts:
@Warren86Nov 24.2004 — I read your PM to me. I'm unconcerned.

To be candid, I would have worked with you. I would have done all that I could to make my code work with your project. But, I take offense at your attitude.

You posted your question on the 22nd at 1:30PM, my time, and you stated "this is fairly urgent."

And now today, TWO days later, you grace me with a response, stating: "The script you wrote is great." Ah, but not so great, because your initial post is ambiguous.

And now, consumed by anger and hatred for me, because I won't let you manipulate me, you lash out with a PM.

Gee. I'm beside myself with grief.
Copy linkTweet thisAlerts:
@KorNov 25.2004 — Hola... Here we have again an angry Warren86...? (It looks like yesterday was not your very best day...) ?

Here's a dynamic DOM solution for your problem jacksonbilly. Kepp the DIV which nested the select collection. Or put the select collection into a table, and give the table that id.

Note that the name of the selects are not important for the code (I used rather index than direct reference), so you may use whichever names you want.

As a bonus... I thought that the user might wanna change his mind at a a moment, so you have a function which restore the initial select collection.

[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var oldS;//global for the cloned content
function rOpt(s,o){
var sel = document.getElementById('oDiv').getElementsByTagName('select');//the select collection
for(var i=0;i<sel.length;i++){//removes the correspondent option from the other select
if((sel[i].options.length==s.options.length)&&(sel[i]!=s)){
sel[i].removeChild(sel[i].options[o])
}
}
var oKep = s.options[o].cloneNode(s.options[o]);//clone the selected option
while(s.hasChildNodes()){//removes all focused select's options
s.removeChild(s.childNodes[0])
}
s.appendChild(oKep);//append the cloned selected option
s.options[0].selected = true;
}
function cloneS(){//clones and copy the initial content
oldS =document.getElementById('oDiv').cloneNode(document.getElementById('oDiv'))
}
function pasteS(){//restore the cloned initial content
document.getElementById('oDiv').parentNode.replaceChild(oldS,document.getElementById('oDiv'))
cloneS();
}
onload=cloneS
</script>
</head>
<body>
<div id="oDiv">
<select name="whichever1" onchange="rOpt(this,this.selectedIndex)">
<option selected>-- Make a selection --</option>
<option value='Most important'>Most important</option>
<option value='Important'>Important</option>
<option value='Kind of'>Kind of</option>
<option value='Not very important'>Not very important</option>
<option value='Least important'>Least important</option>
</select><br>
<select name="whichever2" onchange="rOpt(this,this.selectedIndex)">
<option selected>-- Make a selection --</option>
<option value='Most important'>Most important</option>
<option value='Important'>Important</option>
<option value='Kind of'>Kind of</option>
<option value='Not very important'>Not very important</option>
<option value='Least important'>Least important</option>
</select><br>
<select name="whichever3" onchange="rOpt(this,this.selectedIndex)">
<option selected>-- Make a selection --</option>
<option value='Most important'>Most important</option>
<option value='Important'>Important</option>
<option value='Kind of'>Kind of</option>
<option value='Not very important'>Not very important</option>
<option value='Least important'>Least important</option>
</select><br>
<select name="whichever4" onchange="rOpt(this,this.selectedIndex)">
<option selected>-- Make a selection --</option>
<option value='Most important'>Most important</option>
<option value='Important'>Important</option>
<option value='Kind of'>Kind of</option>
<option value='Not very important'>Not very important</option>
<option value='Least important'>Least important</option>
</select><br>
<select name="whichever5" onchange="rOpt(this,this.selectedIndex)">
<option selected>-- Make a selection --</option>
<option value='Most important'>Most important</option>
<option value='Important'>Important</option>
<option value='Kind of'>Kind of</option>
<option value='Not very important'>Not very important</option>
<option value='Least important'>Least important</option>
</select><br>
<a href="#" onclick="pasteS();return false">Restore the initial options</a> </div>
</body>
</html>
[/code]
×

Success!

Help @jacksonbilly spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...