Drop Down with multiple values

Forum Moderators: open

Message Too Old, No Replies

Drop Down with multiple values

Zizo

6:13 pm on Aug 19, 2004 (gmt 0)

I have included a drop down which can take multiple selects from the user ( basically a listbox ). Now I need to manipulate with the values selected by user in the drop down. Since they are more than one ... I am not able to use

document.form[0].myDropDown.value

in my javascript function.

anyone please advise how can I fetch all the individual values.

Thanks,
Zizo.

Bernard Marx

6:54 pm on Aug 19, 2004 (gmt 0)

<html>
<head>
<script type="text/javascript">function aFunction(elm)
{
  var value = elm.options[elm.options.selectedIndex].value // tricky
  alert(value)
}
</script>
</head>
<body>
<form>
  <select onchange="aFunction(this)">
    <option value="apple">apple
    <option value="banana">banana
    <option value="custard">custard
  </select>
</form>
</body>
</html>

Zizo

7:03 pm on Aug 19, 2004 (gmt 0)

Thanks Bernard. Let me make myself little more clear. What I really need to do is allow user to select multiple values from the dropdown and then I need to run a loop only for the selected values.

So for eg in the code below where I allow user for multiple selections. If user selects apple and banana I need to run the loop in aFunction only for apple and banana.

I hope I am clear here.

<html>
<head>
<script type="text/javascript">
function aFunction(elm) {
var value = elm.options[elm.options.selectedIndex].value // tricky
alert(value)
}
</script>
</head>
<body>
<form>
<select onchange="aFunction(this)" multiple="true">
<option value="apple">apple
<option value="banana">banana
<option value="custard">custard
</select>
</form>
</body>
</html>

Bernard Marx

7:30 pm on Aug 19, 2004 (gmt 0)

I get you now. Sorry. Try this:

<html>
<head>
<script type="text/javascript">function aFunction(elm)
{
  var dessertSel = elm.form.elements["dessert"]
  var selectedDesserts = getSelections(dessertSel)
  // test run through of returned array
  for(var k=0;k<selectedDesserts.length;k++)
    alert(selectedDesserts[k].value)
}
// returns references to the
// actual option elements (not values)
function getSelections(select)
{
  var options = select.options,
    sOptions = [],
    opt, k=0;
  while(opt = options[k++])
    if(opt.selected)
      sOptions[sOptions.length] = opt
  return sOptions
}
</script>
</head>
<body>
Can't use "onchange()" on the select element, since it fires on selection.
Using button instead.<br>
<b>getSelections</b> returns an array of object references to the option elements,
as opposed to an array of values. This is to make the function more flexible (you
might want to do something to those option elements).<br>
To make the function return just values, just add <code>.value</code>
to the 2nd-to-last line.
<form>
  <select name="dessert" multiple="true">
    <option value="apple">apple
    <option value="banana">banana
    <option value="custard">custard
  </select>  <input type="button" value="get selections" onclick="aFunction(this)">
</form>
</body>
</html>

Bernard Marx

7:35 pm on Aug 19, 2004 (gmt 0)

..or do you need to manipulate the selections as soon as they are selected?

Zizo

7:44 pm on Aug 19, 2004 (gmt 0)

No looks perfectly ok. Let me try ....

Thanks

Zizo

10:10 pm on Aug 19, 2004 (gmt 0)

Thanks Bernand ... getSelection was perfect.