Dynamic Dropdownbox with multiple select

linksprocket 0 195 Views

Hope some one can assist me

Below is my code which works fine.

I need to be able to select more than one of the options at the same time. The code at the moment will only select one option rather than all my options.

Any advice would be great.

<HTML> 
<HEAD> 
<title>MDT Role and Application Selection Application </title> 


<!-- Example of the multiple selections 

Sub RunScript 
For i = 0 to (Dropdown1.Options.Length - 1) 
If (Dropdown1.Options(i).Selected) Then 
strComputer = strComputer & Dropdown1.Options(i).Value & vbcrlf 
End If 
Next 
Msgbox strComputer 
End Sub 
--> 



<script> 
function setOptions(chosen) { 
var selbox = document.myform.opttwo; 

selbox.options.length = 0; 
if (chosen == " ") { 
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); 
} 



if (chosen == "1") { 
selbox.options[selbox.options.length] = new 
Option('Microsoft Project','Microsoft Project selected'); 
selbox.options[selbox.options.length] = new 
Option('Microsoft Visio','Microsoft Visio selected'); 
selbox.options[selbox.options.length] = new 
Option('Cognos Application','Cognos Application selected'); 
} 




if (chosen == "2") { 
selbox.options[selbox.options.length] = new 
Option('Microsoft Project','Microsoft Project selected'); 
selbox.options[selbox.options.length] = new 
Option('Microsoft Visio','Microsoft Visio selected'); 
selbox.options[selbox.options.length] = new 
Option('Cognos Application','Cognos Application selected'); 
selbox.options[selbox.options.length] = new 
Option('Oracle Discoverer','Oracle Discoverer selected'); 
selbox.options[selbox.options.length] = new 
Option('At Risk 5.55','At Risk 5.55 selected'); 
} 
if (chosen == "3") { 
selbox.options[selbox.options.length] = new 
Option('Microsoft Project','Microsoft Project selected'); 
selbox.options[selbox.options.length] = new 
Option('Microsoft Visio','Microsoft Visio selected'); 
selbox.options[selbox.options.length] = new 
Option('Vulcan 8','Vulcan 8 selected'); 
selbox.options[selbox.options.length] = new 
Option('Autocad Lite 2010 Lite','Autocad Lite 2010 Lite selected'); 
selbox.options[selbox.options.length] = new 
Option('Autocad Lite 2010 Full','Autocad Lite 2010 Full selected'); 
selbox.options[selbox.options.length] = new 
Option('Aquire','Aquire selected'); 
selbox.options[selbox.options.length] = new 
Option('WellCad','WellCad selected'); 
selbox.options[selbox.options.length] = new 
Option('ArcGis','ArcGis selected'); 
selbox.options[selbox.options.length] = new 
Option('QuickMap','QuickMap selected'); 
} 
} 
</script> 

<HTA:APPLICATION 
border="thin" 
borderStyle="normal" 
caption="yes" 
maximizeButton="yes" 
minimizeButton="yes" 
showInTaskbar="no" 
innerBorder="yes" 
navigable="yes" 
scroll="auto" 
scrollFlat="yes" /> 

<script LANGUAGE="VBScript"> 
Sub Window_onLoad 
window.resizeTo 600,720 
End Sub 
</script> 

</head> 

<body style="{background-image:url('bg2.jpg'); background-repeat:no-repeat;}"> 
<CENTER> 
<img src="logo.gif" /> 
<h2 style="font-size: 12pt; font-family: Arial; color: #000">Please select the required role - Gen-i</h2> 
<div style="font-size: 10pt; font-family: Arial; color: #298FFF"> 
<form name="myform"><div align="center"> 
<b>Select a Role:</b> <br /> <select name="optone" size="1" 
onchange="setOptions(document.myform.optone.options 
[document.myform.optone.selectedIndex].value);"> 
<option value=" " selected="selected"> </option> 
<option value="1">General</option> 
<option value="2">Technical</option> 
<option value="3">Finance</option> 
</select> 
<br /><br /><b>Select Applications:</b> <br /> 
<select name="opttwo" size="10" multiple> 
<option value=" " selected="selected">Please select one of the options above first</option> 
</select> 
<p></p> 
<input type="button" name="go" value="Value Selected" 
onclick="alert(document.myform.opttwo.options 
[document.myform.opttwo.selectedIndex].value);"> 
</div></form> 
</body> 
</html>

Dani AI

Generated

posted working HTML but wanted to allow selecting more than one option; correctly pointed out adding the multiple attribute, but the handler still expects a single value. The real fixes are (1) let the role-select pass the whole control (not just selectedIndex) and (2) rewrite the option-builder so it accepts multiple role values, merges their application lists and removes duplicates. Also replace the single-value read on the "Value Selected" button with a routine that collects all selected options.

Example (drop into the page and change role/app text or IDs to match the original lists):

<script>
// map role id -> array of app objects
var roleApps = {
  '1': [{v:'ms-project', t:'Microsoft Project'}, {v:'ms-visio', t:'Microsoft Visio'}, {v:'cognos', t:'Cognos Application'}],
  '2': [{v:'ms-project', t:'Microsoft Project'}, {v:'ms-visio', t:'Microsoft Visio'}, {v:'cognos', t:'Cognos Application'}, {v:'oracle', t:'Oracle Discoverer'}, {v:'atrisk', t:'At Risk 5.55'}],
  '3': [{v:'ms-project', t:'Microsoft Project'}, {v:'ms-visio', t:'Microsoft Visio'}, {v:'vulcan', t:'Vulcan 8'}, {v:'autocad-lite', t:'Autocad Lite 2010'} /* ... */]
};

function updateApps(roleSelect) {
  // collect selected role values (works in old browsers)
  var selRoles = [];
  for (var i = 0; i < roleSelect.options.length; i++) {
    if (roleSelect.options[i].selected && roleSelect.options[i].value !== ' ') {
      selRoles.push(roleSelect.options[i].value);
    }
  }

  var apps = document.forms['myform'].elements['opttwo'];
  apps.options.length = 0;

  var seen = {}; // dedupe by value
  selRoles.forEach(function(r) {
    (roleApps[r] || []).forEach(function(a) {
      if (!seen[a.v]) {
        apps.options.add(new Option(a.t, a.v));
        seen[a.v] = true;
      }
    });
  });

  if (apps.options.length === 0) {
    apps.options.add(new Option('Please select one of the options above first', ' '));
  }
}

function getSelectedAppValues(selectEl) {
  var out = [];
  for (var i = 0; i < selectEl.options.length; i++) {
    if (selectEl.options[i].selected) out.push(selectEl.options[i].value);
  }
  return out;
}
</script>

Notes and tips:

  • Change the role select to onchange="updateApps(this)" and give the apps select multiple if not already present.
  • The simple for-loop approach avoids selectedOptions/ES6-only features for broader compatibility.
  • If the UI needs better mobile usability, consider checkboxes for roles instead of a multi-select.

This builds on 's suggestion and addresses the single-selection behavior reported by .

Member Avatar for Hangfire
Hangfire 4 Junior Poster in Training 
<select name="optone" size="1" multiple="mulitple" onchange="setOptions(document.myform.optone.options [document.myform.optone.selectedIndex].value);">

I've added multiple="multiple" to your code for the select box.
This will allow you to use hold ctrl and select more than one option.

However I'm not sure if the rest of your code is set up to handle this. Give it a try.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview