Hi i currently have created a Jquery selectable.
I want to store the values of the selected elements
my code is as follows
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Display as grid with TouchPunch</title>
<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>
<script>
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
</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>
$(function() {
$( "#selectable" ).selectable({
selected: function() {
var result = $("#result").empty();
var label = $("#label").empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append(" #" + (index + 1));
label.append(" #" + (index + 1));
});
}
});
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-state-default" Id="1">1</li>
<li class="ui-state-default" Id="2">2</li>
<li class="ui-state-default" Id="3">3</li>
<li class="ui-state-default" Id="4">4</li>
<li class="ui-state-default" Id="5">5</li>
<li class="ui-state-default" Id="6">6</li>
<li class="ui-state-default" Id="7">7</li>
<li class="ui-state-default" Id="8">8</li>
<li class="ui-state-default" Id="9">9</li>
<li class="ui-state-default" Id="10">10</li>
<li class="ui-state-default" Id="11">11</li>
<li class="ui-state-default" Id="12">12</li>
<li class="ui-state-default" Id="13">13</li>
<li class="ui-state-default" Id="14">14</li>
<li class="ui-state-default" Id="15">15</li>
<li class="ui-state-default" Id="16">16</li>
<li class="ui-state-default" Id="17">17</li>
<li class="ui-state-default" Id="18">18</li>
<li class="ui-state-default" Id="19">19</li>
<li class="ui-state-default" Id="20">20</li>
<li class="ui-state-default" Id="21">21</li>
<li class="ui-state-default" Id="22">22</li>
<li class="ui-state-default" Id="23">23</li>
<li class="ui-state-default" Id="24">24</li>
</ol>
<span class="resultarea">Selected Product</span>>
<span id="result" class="resultarea"></span>
I have added a label to the page as well with an id="label"
How can i get the label to display the value which is shown in the
<span id="result" class="resultarea"></span>