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
<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>
<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>
<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>
<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>
$(".selectable").click(function(e) { $(this).toggleClass("selected"); });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)