Multiline select with view

select_line.html.erb

<style typoe="text/css">
  div#tasks_js_drop { margin-left:143px;width:650px; }
  div#tasks_js_drop div { border:1px solid #CCCCCC;margin:5px 0;padding:5px;position:relative; }
  div#tasks_js_drop div a img { position:absolute;top:3px;right:5px; }
</style>

<script type="text/javascript">
  $(function() {    
    // Add newly selected tasks
    $('#schedule_task_ids').change(function() {
      var selected = $('#schedule_task_ids option:selected');
      // check to make sure that this.value not equal to existing value
      var query = document.getElementById("task_" + selected.attr('value'));
      if (query != null) { query.effect("highlight", {}, 3000); return false; }
      
      $('#tasks_js_drop').append('<div><input type="hidden" name="schedule[task_ids][]" value="'+selected.attr('value')+'" id="task_'+selected.attr('value')+'" />'+selected.text()+'<a href="#" class="remove"><img src="/images/icons/24-frame-close.png" /></a></div>');
    });
    
    // Delete tasks based on user action
    $('#tasks_js_drop a').live('click', function(event) {
      event.preventDefault(); // page anchors will not interact with browser
      $(this).parent().fadeOut("slow", function() { $(this).remove() });
    });
  });
</script>

<div>
  <p class="label_select_pair" style="height: auto;">
    <%= f.label :task_ids, 'Tasks' %>
    <%= select_tag('available_schedules', 
          options_for_select(@tasks.collect{|t| [t.long_name, t.id]}, @schedule.task_ids), 
          {:multiple => true, :id => 'schedule_task_ids', :size => [10, @tasks.size].min, :class => 'wide'}) %>
  </p>
</div>
<div id="tasks_js_drop">
  <input type="hidden" name="schedule[task_ids][]" value="" />
  <%# Add default selected tasks %>
  <% @schedule.tasks.each do |task| %>
    <div><input type="hidden" name="schedule[task_ids][]" value="<%= task.id %>" id="task_<%= task.id %>" /><%= task.long_name %><a href="#"><img src="/images/icons/24-frame-close.png" /></a></div>
  <% end %>
</div>