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
LVL 2
mmarthaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mmarthaAuthor Commented:
sorry for the typo.

(...) in case is just a listbox attribute or something like that.
0
cristy56Commented:
yes, you can do that with some Javascript.
Like this :

<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function pick(obj)
{
      i = obj.sel.selectedIndex;
            top.location=obj.sel.options[i].value;
      
}
// --></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
0
RozanaZCommented:
<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>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

dakydCommented:
@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>
0
mmarthaAuthor Commented:
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
0
mmarthaAuthor Commented:
Also, I'll raise the points since it isn't pure HTML.
0
dakydCommented:
Well, I'd like to blame the browser (IE6), but I should've known better and I didn't test it very thoroughly.  IE6 apparently has a bit of a timing issue with the selectedIndex property, so that when the handleMultiples function was being called, IE didn't know which option had just been clicked on.  That's what was wreaking havoc with the script I wrote.  I tweaked it a bit (and tested more thoroughly this time), so it should work for IE now (as well as Mozilla & Opera).  There's a tiny delay once you click on the option, but I can't make the timeout any shorter (it's set to 1ms at the moment).  Anyhow, hope that 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 = delayHandle;
    }
  }
}

function delayHandle()
{
  selId = this.id;
  setTimeout("handleMultiples()", 1);
}

function handleMultiples(objId)
{
  var obj = document.getElementById(selId);
  var lastChoice = obj.selectedIndex;
  obj.optArray[lastChoice] = obj.optArray[lastChoice] ^ true;

  for (var i = 0, n = obj.optArray.length; i < n; i ++)
    obj.options[i].selected = obj.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>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mmarthaAuthor Commented:
thank youuu very much :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.