Unable to display selected value in jquery selectable

Unable to display selected value in jquery selectable

I want to display the selected item and only one item should be able to selected

i achieved the second but struggling for first, Help Plz!!!!!!


  1. <!DOCTYPE html>
  2. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.   <meta charset="UTF-8">
  4.   <title>jQuery single select</title>
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  7.   <style type="text/css">
  8.     
  9. #feedback { font-size: 1.4em; }
  10. #selectable .selecting { background: #FECA40; }
  11. #selectable .selected { background: #F39814; color: white; }
  12. #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  13. #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  14.   </style>
  15. <body>

  17. <ul id="selectable">
  18. <li>Item 1</li>
  19. <li>Item 2</li>
  20. <li>Item 3</li>
  21. <li>Item 4</li>
  22. <li>Item 5</li>

  24. </ul>
  25.   <p id="feedback">
  26. <span>You've selected:</span> <span id="select-result">none</span>.
  27. </p>

  29. <script>
  30. $("#selectable li").click(function() {
  31. $(this).addClass("selected").siblings().removeClass("selected");
  32. var result = $( "#select-result" ).empty();
  33. $( ".selected", this ).each(function() {
  34. var index = $( "#selectable li" ).index( this );
  35. result.append( " #" + ( 0 + 1 ) );
  36. });
  38. });
  39. </script>
  40. </body></html>