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!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How to populate drop down select from multiple select selections
- Thread starter olchik
- Start date
BillyRayPreachersSon
Programmer
Yes - check out my FAQ in the FAQs section (a quick search would have found this for you):
"How do I create multi-level select / list / drop down boxes? " (faq216-6294)
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
"How do I create multi-level select / list / drop down boxes? " (faq216-6294)
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
- Thread starter
- #3
Hi BillyRayPreachersSon, thank you for your response. I did see this thread, but that's not what I need to do.
I have multiple drop down select box with dynamically populated options. THose options are postweeks. User should be able to select up to 8 weeks. After user selects post weeks, another drop down is populated...options in this drop down box should be weeks that user previously selected. In this drop down user will select key post week...which is one of the post weeks he selected in previous drop down.
Please help if you can! I know very little JavaScript and have no idea how to do it:-(
Thank you!
I have multiple drop down select box with dynamically populated options. THose options are postweeks. User should be able to select up to 8 weeks. After user selects post weeks, another drop down is populated...options in this drop down box should be weeks that user previously selected. In this drop down user will select key post week...which is one of the post weeks he selected in previous drop down.
Please help if you can! I know very little JavaScript and have no idea how to do it:-(
Thank you!
- Thread starter
- #4
BillyRayPreachersSon
Programmer
Try this for size:
I have no idea what a "postweek" is, so have just used dummy options, but I'm sure you can replace those easily enough.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Code:
<html>
<head>
<script type="text/javascript">
var maxAllowedItems = 8;
function updateInitialCount(selObj) {
var opts = selObj.options;
var count = 0;
for (var loop=0; loop<opts.length; loop++) {
if (opts[loop].selected) {
count++;
if (count > maxAllowedItems) opts[loop].selected = false;
}
}
return(count);
}
function copyOptions() {
var sel1 = document.getElementById('sel01');
var sel2 = document.getElementById('sel02');
var selectedCount = updateInitialCount(sel1); // Just in case onchange hasn't fired
sel2.options.length = 0;
if (selectedCount) {
var opts = sel1.options;
for (var loop=0; loop<opts.length; loop++) {
if (opts[loop].selected) {
addOption(sel2, opts[loop].text, opts[loop].value);
}
}
} else {
addOption(sel2, 'Please select some options from the previous box!', '');
}
}
function addOption(selObj, value, text) {
// copy options from array of [value, pair] arrays to select box
// IE doesn't work if you use the DOM-standard method, however...
if (typeof(window.clientInformation) != 'undefined') {
// IE doesn't take the second "before" parameter...
selObj.add(new Option(value, text));
} else {
selObj.add(new Option(value, text), null);
}
}
</script>
</head>
<body>
<form>
<select id="sel01" multiple="multiple" onchange="updateInitialCount(this);">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
<br />
<input type="button" onclick="copyOptions();" value="Copy selected options" />
<br />
<select id="sel02">
<option value="">Please select some options from the previous box!</option>
</select>
</form>
</body>
</html>I have no idea what a "postweek" is, so have just used dummy options, but I'm sure you can replace those easily enough.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
BillyRayPreachersSon
Programmer
Note: after 8 options are selected, any further selections will cause options from the end of the list to be de-selected, rather than the last-selected option. If this isn't desireable, you'll have to keep a historuy of what options are selected, so you know the last one to unselect.
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
- Thread starter
- #7
Hello BillyRayPreachersSon,
Thank you very much for your help! That's almost what I need, except that I need to eliminate button somehow. I was trying to activate function like this:
<form>
<select id="sel01" multiple="multiple" onchange="updateInitialCount(this);">
<option value="1" onblur="copyOptions();" >Option 1</option>
<option value="2" onblur="copyOptions();">Option 2</option>
<option value="3" onblur="copyOptions();">Option 3</option>
<option value="4" onblur="copyOptions();">Option 4</option>
<option value="5" onblur="copyOptions();">Option 5</option>
<option value="6" onblur="copyOptions();">Option 6</option>
<option value="7" onblur="copyOptions();">Option 7</option>
<option value="8" onblur="copyOptions();">Option 8</option>
<option value="9" onblur="copyOptions();">Option 9</option>
<option value="10" onblur="copyOptions();">Option 10</option>
</select>
but it doesn't work ...it didn't work onchange or onclick either:-( Do you know if there are ways to avoid using button?
Thank you very much!
Olchik
Thank you very much for your help! That's almost what I need, except that I need to eliminate button somehow. I was trying to activate function like this:
<form>
<select id="sel01" multiple="multiple" onchange="updateInitialCount(this);">
<option value="1" onblur="copyOptions();" >Option 1</option>
<option value="2" onblur="copyOptions();">Option 2</option>
<option value="3" onblur="copyOptions();">Option 3</option>
<option value="4" onblur="copyOptions();">Option 4</option>
<option value="5" onblur="copyOptions();">Option 5</option>
<option value="6" onblur="copyOptions();">Option 6</option>
<option value="7" onblur="copyOptions();">Option 7</option>
<option value="8" onblur="copyOptions();">Option 8</option>
<option value="9" onblur="copyOptions();">Option 9</option>
<option value="10" onblur="copyOptions();">Option 10</option>
</select>
but it doesn't work ...it didn't work onchange or onclick either:-( Do you know if there are ways to avoid using button?
Thank you very much!
Olchik
- Thread starter
- #8
BillyRayPreachersSon, I just replaced <select id="sel01" multiple="multiple" onchange="updateInitialCount(this);"> with
<select id="sel01" multiple="multiple" onchange="copyOptions();"> and it works. I will use another validate function to limit to 8 selectips.
THank you very much for your help!
Olchik
<select id="sel01" multiple="multiple" onchange="copyOptions();"> and it works. I will use another validate function to limit to 8 selectips.
THank you very much for your help!
Olchik
- Status
Similar threads