Advanced Search

Add elements into a list from a select field

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

Expand | Embed | Plain Text

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.