asked on

Automate CTRL to allow multi-select

For a program that I am writing, I want to include a button on one of the UI's that when you click it, it automates holding down the CTRL key, when they click the button again, it will turn off the CTRL. I will be using it to enable the user to easily select multiple items in a list.
Any suggestions? Thank you.

noamattd

I don't think this is possible.

I would suggest you change your multiple select list to a list of checkboxes, as you can do more with styling the elements. You can put them in their own div tag and use some CSS to give it a border & vertical scrollbar to make it look more like a select.

dbritt

Caitlin, I'm working on it...don't give up :)

ASKER CERTIFIED SOLUTION

KennyTM

membership

This solution is only available to members.

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

Start Free Trial

KennyTM

BTW, the code doesn't really help you hold down the CTRL key. It just reloads previous state of the "irrelevent" options. This introduce a little flash during selection...

(If you want to select a single option, hold the CTRL key ;) )

dbritt

It doesn't work when you try to drag-select...

dbritt

You can keep Kenny's as the answer, I just put enough effort into this script that I feel obligated to post it :)
Pretty much the only difference is that you can toggle between CTRL modes and also you can deselect an option when it is the only one in the select (can't do that w/ Kenny's). I was looking for a way to get the dragging to work perfectly, but it looks like Kenny's does it just as well as can be done. ^^
I personally like Kenny's version for it's conciseness of code, maybe you can find a way to munge his with my way of deselecting a lonely option.

=================================

<html>
<head>
      <title>Page</title>

      <script language="JavaScript">

      var ctrlEnabled = true;
      var selects = new Array();

      function toggleCtrl()
      {
            ctrlEnabled = !ctrlEnabled;

            for(var i = 0; i < selects.length; i++)
            {
                  selects[i].refreshed = true;
            }

            // I just added this to change the text on the button, you can remove it
            window.event.srcElement.value = "Turn CTRL " + (ctrlEnabled ? "off" : "on");
      }

      function saveSelection(sel)
      {
            if(!ctrlEnabled || (window.event && window.event.ctrlKey))
                  return;

            if(!selects[sel.id])
            {
                  selects[sel.id] = new Object();
            }

            var curr = selects[sel.id];

            curr.options = new Array();

            for(var i = 0; i < sel.options.length; i++)
            {
                  var option = new Object();
                  option.selected = sel.options[i].selected;

                  curr.options.push(option);
            }

            sel.selectedIndex = -1;
      }

      function multiSelect(sel)
      {
            if(window.event && window.event.ctrlKey)
                  return;

            if(ctrlEnabled)
            {
                  var curr = selects[sel.id];

                  for(var i = 0; i < sel.options.length; i++)
                  {
                        sel.options[i].selected = sel.options[i].selected ^ curr.options[i].selected;
                  }
            }
      }

      </script>
</head>
<body>

<input type="button" value="Turn CTRL off" onclick="javascript:toggleCtrl();">

<br><br>

<select id="sel1" size="6" multiple="true" onmousedown="javascript:saveSelection(this);" onchange="javascript:multiSelect(this);">

<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>

</select>

<select id="sel1" size="6" multiple="true" onmousedown="javascript:saveSelection(this);" onchange="javascript:multiSelect(this);">

<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>

</select>

</body>
</html>