asked on

Multiple selections in ListBox with single click.

This without have to press the Control button.

Can it be done? I googled for it and didn't find anything. Maybe I searched wrong :( (hopefully)

I don't know how much points to give. So advice me please. I'll start with easy question in case is just an attri

mmartha

ASKER

sorry for the typo.

(...) in case is just a listbox attribute or something like that.

cristy56

yes, you can do that with some Javascript.
Like this :

<head>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</head>

<body>
:
<FORM NAME='Select'><SELECT NAME='sel' SIZE=1 OnChange=pick(this.form)>
<OPTION>Please select
<OPTION value='../test1.htm'>test page 1
<OPTION value='../test2.htm'>test page 2
</SELECT></FORM>
:
</body>

====================
Cristy

RozanaZ

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
      function test(obj)
      {
            for (i = 0; i < obj.options.length; i++)
            {
                  if (obj.options[i].selected)
                  {
                        obj.options[i].selected = false;
                  }
                  else
                  {
                        obj.options[i].selected = true;
                  }
            }
      }
</script>
</HEAD>
<BODY>
<table>
      <tr>
            <td>
                  <form name="f1" id="f1" action="http://1.1.1">
                        <select id="s1" name="s1" onClick="test(this)" multiple="true" size="7">
                              <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>
                        </select>
                  </form>
            </td>
      </tr>
</table>

</BODY>
</HTML>

dakyd

@RozanaZ
That will just select every option but the one you just clicked on. For example, it's impossible to have three options selected at a time, it will always select four options (all but the one you clicked on).

mmartha,
What you're asking for can't be done with plain old HTML, but a little scripting can do it for you. Here's an example page will an implementation of this script. I made it so that it will only apply this behavior to select boxes with a class of "noCtl" so that you have the option of this behavior or the regular behavior. However, you can also easily tweak this to apply to all select boxes on your page. Either way, hope it helps.

<html>
<head>
<script type="text/javascript">
window.onload = init;

function init()
{
var sels = document.getElementsByTagName("select");
for (var i = 0, n = sels.length; i < n; i ++)
{
if (sels[i].className == "noCtl")
{
var currSel = sels[i];
var selOptions = new Array();
for (var j = 0, k = currSel.options.length; j < k; j ++)
selOptions[j] = currSel.options[j].selected;
currSel.optArray = selOptions;
currSel.onclick = handleMultiples;
}
}
}

function handleMultiples()
{
var lastChoice = this.options.selectedIndex;
this.optArray[lastChoice] = this.optArray[lastChoice] ^ true;

for (var i = 0, n = this.optArray.length; i < n; i ++)
{
this.options[i].selected = this.optArray[i] == 1? true: false;
}
}
</script>
</head>

<body>
<label for="firstOne">Multiple options without the control button:</label>
<select multiple="multiple" class="noCtl" id="firstOne">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</body>
</html>

mmartha

ASKER

thank you all for answering. And sorry for

dakyd,
Your idea is what I'm looking for, but when I use it, the select gets kind of weird. It seems like the first one selected actes like some kind of shift selection: only if I first select the first or last option I can select them all, otherwise it deselects some of them and leaves selected others.

Could it be the code? the explorer? (IE 6) or some OSI Model monkey-layer error? :S

mmartha

ASKER

Also, I'll raise the points since it isn't pure HTML.

ASKER CERTIFIED SOLUTION

dakyd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mmartha

ASKER

thank youuu very much :)