selectのoptionをグループ化し、グループ選択用のselectを生成。グループ選択でoptionの表示を切り替え。

select_grouped.coffee

$ ->
  do init = (context = document)->
    $('select.grouped', context).each ->
      $select = $ @
      $hidden = $select.clone().hide().attr(name: '', class: '')
      $options = $select.find 'option'

      group_title = $select.data 'group-title'
      group_by    = $select.data 'group-by'
      group_label = $select.data 'group-label'
      group_pos   = $select.data('group-position') || 'before'
      group_sort  = $select.data('group-sort') || 'desc'
      group_select_id = $select.data 'group-select'
      group_radio_name = $select.data 'group-radio'

      positions = ['before', 'after']
      group_pos = positions[0] unless $.inArray(group_pos, positions)

      # 空optionとグループ化するoptionに分ける
      $empty = $options.filter(":not([data-#{group_by}])")
      $options = $options.filter("[data-#{group_by}]")

      switch 
        when group_select_id
          $group_select = $("##{group_select_id}")
        when group_radio_name
          $group_select = $("input[name='#{group_radio_name}']")
        else
          # グループ指定のselectと空optionをつくる
          $group_select = $(document.createElement 'select')
          $group_empty = $(document.createElement 'option').val('').text(group_title)
          
          # グループ指定optionをつくる
          groups = $.unique($.map $options, (v)->
            return $(v).data group_by
          ).sort (a, b)->
            if group_sort == 'desc' then b - a else a - b
          $group_options = $ $.map groups, (v)->
            option = document.createElement 'option'
            option.value = v
            # http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery
            option.appendChild document.createTextNode group_label.replace('%s', v) # option.text = だとIEで効かないので
            option

          # option入れる
          $group_select.append($group_empty).append($group_options)

          # 配置する
          $select[group_pos]($group_select)

      # 表示切り替え
      toggle_options = (selected)->
        $select.empty()
        $select.append $empty
        if selected
          $visible = $hidden.find("option[data-#{group_by}=#{selected}]").clone()
          $select.append $visible

      # グループ選択
      $group_select.on 'change', (ev)->
        selected = ev.target.value
        $select.val('')
        toggle_options selected

      # 元selectのvalueが変わったら(not on change)
      $select.on 'select', (ev)->
        $current = $hidden.find("option[value='#{ev.current}']")
        selected = $current.data group_by
        $group_select.val selected
        toggle_options selected
        $select.val ev.current

      # init
      toggle_options(switch 
        when group_select_id  then $group_select.val() 
        when group_radio_name then $group_select.filter(':checked').val()
        else null)

  # export
  window.SelectGrouped =
    init: init