multiselect.haml

!!! XML
!!! 1.0

%html
  %head
    %title multiple selection demo
    %script{:type => 'text/javascript', :src => 'prototype.js'}
    %script{:type => 'text/javascript', :src => 'effects.js'}
    %script{:type => 'text/javascript', :src => 'controls.js'}
    %style{:type => 'text/css'}
      :sass
        dt
          :float left
          :clear left
          :width 3em

        dd
          :margin-left 4em

        ul
          :padding-left 0
          :min-height 1em

          li
            :float left
            :list-style-type none
            :margin-right 1em

        select
          :clear left

    :javascript
      function edit(elem) {
        var show = $(elem).getElementsByClassName('show')[0];
        var edit = $(elem).getElementsByClassName('edit')[0];

        show.hide();
        edit.show();

        edit.getElementsByTagName('select')[0].focus();
      }

      function _update(elem) {
        var show = $(elem).getElementsByClassName('show')[0];
        var edit = $(elem).getElementsByClassName('edit')[0];

        show.innerHTML = $F(edit.getElementsByTagName('select')[0]).join(', ');

        edit.hide();
        show.show();
      }

  %body{:onload => "_update('os'); _update('db')"}
    %dl
      %dt
        %a{:href => '#', :onclick => "edit('os')"} OS
      %dd#os
        .show
        .edit
          %select{:multiple => true}
            %option Windows
            %option Linux
            %option Mac OS X
            %option Windows
            %option Linux
            %option Mac OS X
            %option Windows
            %option Linux
            %option Mac OS X
            %option Windows
            %option Linux
            %option Mac OS X
            %option Windows
            %option Linux
            %option Mac OS X
            %option Windows
            %option Linux
            %option Mac OS X
            %option Windows
            %option Linux
            %option Mac OS X
          %button{:onclick => "_update('os')"} OK

      %dt
        %a{:href => '#', :onclick => "edit('db')"} DB
      %dd#db
        %ul.show
        .edit
          %select{:multiple => true}
            %option SQLite
            %option MySQL
            %option Postgres
            %option SQLite
            %option MySQL
            %option Postgres
            %option SQLite
            %option MySQL
            %option Postgres
            %option SQLite
            %option MySQL
            %option Postgres
            %option SQLite
            %option MySQL
            %option Postgres
            %option SQLite
            %option MySQL
            %option Postgres
            %option SQLite
            %option MySQL
            %option Postgres
          %button{:onclick => "_update('db')"} OK