Add elements into a list from a select field


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!-- HTML -->
  2. <select id="my-list">
  3. <option value="1">Smashing Magazine</option>
  4. <option value="2">Woork Up</option>
  5. <option value="3">Mashable</option>
  6. </select>
  7. <input type="button" id="submit-list" value="Button"/>
  8. <ul id="selected-items-list"></ul>
  9.  
  10. //JavaScript
  11. $("#submit-list").click(function selectItem(){
  12. s = $("option:selected")
  13. el = s.text();
  14. destination = $("#selected-items-list");
  15. $(destination).append('<li>'+el+'</li>');
  16. $(destination +':last').css('display', 'none').fadeIn(1000);
  17. $("option:selected").remove();
  18. if($('#my-list option').length==0){
  19. $('input[id=submit-list]').attr('disabled', 'disabled');
  20. }
  21. });

URL: http://woorkup.com/2009/10/14/jquery-lessons-how-to-interact-with-html-forms/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.