?
Solved

Multiple selections in ListBox with single click.

Posted on 2004-11-03
8
Medium Priority
?
478 Views
Last Modified: 2008-01-09
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
0
Comment
Question by:mmartha
8 Comments
 
LVL 2

Author Comment

by:mmartha
ID: 12487880
sorry for the typo.

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

Expert Comment

by:cristy56
ID: 12489232
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
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12490784
<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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:dakyd
ID: 12495416
@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
 
LVL 2

Author Comment

by:mmartha
ID: 12506457
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
 
LVL 2

Author Comment

by:mmartha
ID: 12506470
Also, I'll raise the points since it isn't pure HTML.
0
 
LVL 19

Accepted Solution

by:
dakyd earned 1000 total points
ID: 12507735
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
 
LVL 2

Author Comment

by:mmartha
ID: 12509863
thank youuu very much :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question