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.
CaitlinRobertsAsked:
Who is Participating?
 
KennyTMCommented:
Try this...

<script>
function change_sel (obj) {
      if (!this.selected_array)
            this.selected_array = new Array();
      for (var i = 0; i < obj.options.length; ++ i) {
            if (this.selected_array[i] == undefined)
                  this.selected_array[i] = false;
            if (obj.options[i].selected)
                  obj.options[i].selected = selected_array[i] = !selected_array[i];
            else
                  obj.options[i].selected = selected_array[i];
      }
}
</script>


<select multiple id="xxx" onchange="change_sel(this);">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
</select>
0
 
noamattdCommented:
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.
0
 
dbrittCommented:
Caitlin, I'm working on it...don't give up :)
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
KennyTMCommented:
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 ;) )
0
 
dbrittCommented:
It doesn't work when you try to drag-select...
0
 
dbrittCommented:
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>
0
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.

All Courses

From novice to tech pro — start learning today.