Click here to Skip to main content
15,920,053 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
SQL
I have a Jquery selectable list on one of my applications, if a user holds down the control key it allows them to select multiple items with out having to select them in a sequence.
I would like to allow the users to be able to use this functionality without having to press the Ctrl button on their keyboard


This is my code

Javascript link

XML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>


css style
CSS
<style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
  .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
  </style>

Javascript
XML
<script>
  $(function() {
    $( "#selectable" ).selectable();
  });
  </script>
   <script type="text/javascript">
         $(function() {
            $( "#selectable" ).selectable({
               selected: function() {
                   $('#result').val('');
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable li" ).index( this );
                     //document.getElementById("#CapturedValues").value = document.getElementById("#CapturedValues").value + (" #" + (index + 1));
                    // document.getElementById("result").value.append(" #" + (index + 1));


                     $('#result').val($('#result').val() + " #" + (index + 1));
                   //  $('#CapturedValues').val($('#result').val());

                    // document.getElementById("HiddenResult").value = document.getElementById('inflowperc').value;
                     //document.getElementById("CapturedValues").val(result.append(" #" + (index + 1)));
                      //alert(document.getElementById("CapturedValues").val(result.append(" #" + (index + 1))));
                  });
                 ;
               }

            });

         });
      </script>

Html
XML
<ol id="selectable">
   <li class="ui-state-default" Id="1" style="width: 34px; height: 34px;">1</li>
<li class="ui-state-default" Id="2" style="width: 34px; height: 34px;">2</li>
<li class="ui-state-default" Id="3" style="width: 34px; height: 34px;">3</li>
<li class="ui-state-default" Id="4" style="width: 34px; height: 34px;">4</li>
<li class="ui-state-default" Id="5" style="width: 34px; height: 34px;">5</li>
<li class="ui-state-default" Id="6" style="width: 34px; height: 34px;">6</li>
<li class="ui-state-default" Id="7" style="width: 34px; height: 34px;">7</li>
<li class="ui-state-default" Id="8" style="width: 34px; height: 34px;">8</li>
<li class="ui-state-default" Id="9" style="width: 34px; height: 34px;">9</li>
<li class="ui-state-default" Id="10" style="width: 34px; height: 34px;">10</li>
<li class="ui-state-default" Id="11" style="width: 34px; height: 34px;">11</li>
<li class="ui-state-default" Id="12" style="width: 34px; height: 34px;">12</li>
<li class="ui-state-default" Id="13" style="width: 34px; height: 34px;">13</li>
<li class="ui-state-default" Id="14" style="width: 34px; height: 34px;">14</li>
<li class="ui-state-default" Id="15" style="width: 34px; height: 34px;">15</li>
<li class="ui-state-default" Id="16" style="width: 34px; height: 34px;">16</li>
<li class="ui-state-default" Id="17" style="width: 34px; height: 34px;">17</li>
<li class="ui-state-default" Id="18" style="width: 34px; height: 34px;">18</li>
<li class="ui-state-default" Id="19" style="width: 34px; height: 34px;">19</li>
<li class="ui-state-default" Id="20" style="width: 34px; height: 34px;">20</li>
<li class="ui-state-default" Id="21" style="width: 34px; height: 34px;">21</li>
<li class="ui-state-default" Id="22" style="width: 34px; height: 34px;">22</li>
<li class="ui-state-default" Id="23" style="width: 34px; height: 34px;">23</li>
<li class="ui-state-default" Id="24" style="width: 34px; height: 34px;">24</li>
<li class="ui-state-default" Id="25" style="width: 34px; height: 34px;">25</li>
<li class="ui-state-default" Id="26" style="width: 34px; height: 34px;">26</li>
<li class="ui-state-default" Id="27" style="width: 34px; height: 34px;">27</li>
<li class="ui-state-default" Id="28" style="width: 34px; height: 34px;">28</li>
<li class="ui-state-default" Id="29" style="width: 34px; height: 34px;">29</li>
<li class="ui-state-default" Id="30" style="width: 34px; height: 34px;">30</li>
<li class="ui-state-default" Id="31" style="width: 34px; height: 34px;">31</li>
<li class="ui-state-default" Id="32" style="width: 34px; height: 34px;">32</li>
<li class="ui-state-default" Id="33" style="width: 34px; height: 34px;">33</li>
<li class="ui-state-default" Id="34" style="width: 34px; height: 34px;">34</li>
<li class="ui-state-default" Id="35" style="width: 34px; height: 34px;">35</li>
<li class="ui-state-default" Id="36" style="width: 34px; height: 34px;">36</li>
<li class="ui-state-default" Id="37" style="width: 34px; height: 34px;">37</li>
<li class="ui-state-default" Id="38" style="width: 34px; height: 34px;">38</li>
<li class="ui-state-default" Id="39" style="width: 34px; height: 34px;">39</li>
<li class="ui-state-default" Id="40" style="width: 34px; height: 34px;">40</li>
<li class="ui-state-default" Id="41" style="width: 34px; height: 34px;">41</li>
<li class="ui-state-default" Id="42" style="width: 34px; height: 34px;">42</li>
<li class="ui-state-default" Id="43" style="width: 34px; height: 34px;">43</li>
<li class="ui-state-default" Id="44" style="width: 34px; height: 34px;">44</li>
<li class="ui-state-default" Id="45" style="width: 34px; height: 34px;">45</li>
<li class="ui-state-default" Id="46" style="width: 34px; height: 34px;">46</li>
<li class="ui-state-default" Id="47" style="width: 34px; height: 34px;">47</li>
<li class="ui-state-default" Id="48" style="width: 34px; height: 34px;">48</li>
<li class="ui-state-default" Id="49" style="width: 34px; height: 34px;">49</li>
<li class="ui-state-default" Id="50" style="width: 34px; height: 34px;">50</li>
<li class="ui-state-default" Id="51" style="width: 34px; height: 34px;">51</li>
<li class="ui-state-default" Id="52" style="width: 34px; height: 34px;">52</li>
<li class="ui-state-default" Id="53" style="width: 34px; height: 34px;">53</li>
<li class="ui-state-default" Id="54" style="width: 34px; height: 34px;">54</li>
<li class="ui-state-default" Id="55" style="width: 34px; height: 34px;">55</li>
<li class="ui-state-default" Id="56" style="width: 34px; height: 34px;">56</li>
<li class="ui-state-default" Id="57" style="width: 34px; height: 34px;">57</li>
<li class="ui-state-default" Id="58" style="width: 34px; height: 34px;">58</li>
<li class="ui-state-default" Id="59" style="width: 34px; height: 34px;">59</li>
<li class="ui-state-default" Id="60" style="width: 34px; height: 34px;">60</li>
<li class="ui-state-default" Id="61" style="width: 34px; height: 34px;">61</li>
<li class="ui-state-default" Id="62" style="width: 34px; height: 34px;">62</li>
<li class="ui-state-default" Id="63" style="width: 34px; height: 34px;">63</li>
<li class="ui-state-default" Id="64" style="width: 34px; height: 34px;">64</li>
<li class="ui-state-default" Id="65" style="width: 34px; height: 34px;">65</li>
<li class="ui-state-default" Id="66" style="width: 34px; height: 34px;">66</li>
<li class="ui-state-default" Id="67" style="width: 34px; height: 34px;">67</li>
<li class="ui-state-default" Id="68" style="width: 34px; height: 34px;">68</li>
<li class="ui-state-default" Id="69" style="width: 34px; height: 34px;">69</li>
<li class="ui-state-default" Id="70" style="width: 34px; height: 34px;">70</li>
<li class="ui-state-default" Id="71" style="width: 34px; height: 34px;">71</li>
<li class="ui-state-default" Id="72" style="width: 34px; height: 34px;">72</li>
<li class="ui-state-default" Id="73" style="width: 34px; height: 34px;">73</li>
<li class="ui-state-default" Id="74" style="width: 34px; height: 34px;">74</li>
<li class="ui-state-default" Id="75" style="width: 34px; height: 34px;">75</li>
<li class="ui-state-default" Id="76" style="width: 34px; height: 34px;">76</li>
<li class="ui-state-default" Id="77" style="width: 34px; height: 34px;">77</li>
<li class="ui-state-default" Id="78" style="width: 34px; height: 34px;">78</li>
<li class="ui-state-default" Id="79" style="width: 34px; height: 34px;">79</li>
<li class="ui-state-default" Id="80" style="width: 34px; height: 34px;">80</li>
<li class="ui-state-default" Id="81" style="width: 34px; height: 34px;">81</li>
<li class="ui-state-default" Id="82" style="width: 34px; height: 34px;">82</li>
<li class="ui-state-default" Id="83" style="width: 34px; height: 34px;">83</li>
<li class="ui-state-default" Id="84" style="width: 34px; height: 34px;">84</li>
<li class="ui-state-default" Id="85" style="width: 34px; height: 34px;">85</li>
<li class="ui-state-default" Id="86" style="width: 34px; height: 34px;">86</li>
<li class="ui-state-default" Id="87" style="width: 34px; height: 34px;">87</li>
<li class="ui-state-default" Id="88" style="width: 34px; height: 34px;">88</li>
<li class="ui-state-default" Id="89" style="width: 34px; height: 34px;">89</li>
<li class="ui-state-default" Id="90" style="width: 34px; height: 34px;">90</li>
<li class="ui-state-default" Id="91" style="width: 34px; height: 34px;">91</li>
<li class="ui-state-default" Id="92" style="width: 34px; height: 34px;">92</li>
<li class="ui-state-default" Id="93" style="width: 34px; height: 34px;">93</li>
<li class="ui-state-default" Id="94" style="width: 34px; height: 34px;">94</li>
<li class="ui-state-default" Id="95" style="width: 34px; height: 34px;">95</li>
<li class="ui-state-default" Id="96" style="width: 34px; height: 34px;">96</li>
<li class="ui-state-default" Id="97" style="width: 34px; height: 34px;">97</li>
<li class="ui-state-default" Id="98" style="width: 34px; height: 34px;">98</li>
<li class="ui-state-default" Id="99" style="width: 34px; height: 34px;">99</li>
<li class="ui-state-default" Id="100" style="width: 34px; height: 34px;">100</li>
</ol>
 <span class="resultarea">Selected Product</span>>
      <input type="text" id="result" name="result" class="resultarea"></input>
Posted
Updated 7-Jul-15 22:43pm
v2

1 solution

You can handle the selection yourself when the user clicks on an element - toggling the selected class.

$(".selectable").click(function(e) {
    $(this).toggleClass("selected");
});
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900