?
Solved

Automate CTRL to allow multi-select

Posted on 2006-04-17
6
Medium Priority
?
642 Views
Last Modified: 2011-04-14
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.
0
Comment
Question by:CaitlinRoberts
  • 3
  • 2
6 Comments
 
LVL 4

Expert Comment

by:noamattd
ID: 16468688
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
 
LVL 15

Expert Comment

by:dbritt
ID: 16468802
Caitlin, I'm working on it...don't give up :)
0
 
LVL 8

Accepted Solution

by:
KennyTM earned 750 total points
ID: 16469439
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
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!

 
LVL 8

Expert Comment

by:KennyTM
ID: 16469465
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
 
LVL 15

Expert Comment

by:dbritt
ID: 16469504
It doesn't work when you try to drag-select...
0
 
LVL 15

Expert Comment

by:dbritt
ID: 16471019
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 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