级联选择，自动发现下级控件

cascadingSelect.js.coffee

# 在 jQuery 的原型中添加一个新的方法，作为级联选择的插件
#
# options:
#   fetchNextNode: function($node){} 用于如何发现下级控件的回调函数，必须返回节点数组
#
$.fn.cascadingSelect = (options = {})->
  currentNode = $rootNode = $(this)
  otherNodes = options['fetchNextNode']($rootNode)

  listenChange = (node)->
    node.change ->
      return unless node.nextNode
      options = node.nextNode.options
      selectedOption = node.find('option:selected').text()
      if node.val()
        node.nextNode.html(
          $(options).filter("optgroup[label='#{selectedOption}']").html()
        )
      else
        node.nextNode.html(options)
      node.nextNode.change()

  # 开始串联整条级联链条
  for node, index in otherNodes
    if index == 0
      $rootNode.nextNode = node
    else
      otherNodes[index - 1].nextNode = node
    node.options = node.html()

  # 遍历级联链条，为每一个非末尾节点注册监听函数
  while currentNode.nextNode
    listenChange currentNode
    currentNode = currentNode.nextNode

example.html

<div class="form-group select optional q_grades_id_in"><select id="grade-select-input" class="select optional cascade-select form-control" name="q[grades_id_in]"><option value="">请选择年级</option>
<option value="16">一年级</option>
<option value="17">二年级</option>
<option value="18">三年级</option>
<option value="19">四年级</option>
<option value="20">五年级</option>
<option value="21">六年级</option></select></div>
<div class="form-group grouped_select optional q_klasses_id_in"><select id="klass-select-input" class="grouped_select optional cascade-select form-control" name="q[klasses_id_in]"><option value="">请选择班级</option>
<optgroup label="一年级"><option value="118">一年级(1)班</option>
<option value="124">一年级(2)班</option>
<option value="130">一年级(3)班</option></optgroup><optgroup label="二年级"><option value="119">二年级(1)班</option>
<option value="125">二年级(2)班</option>
<option value="131">二年级(3)班</option></optgroup><optgroup label="三年级"><option value="120">三年级(1)班</option>
<option value="126">三年级(2)班</option>
<option value="132">三年级(3)班</option></optgroup><optgroup label="四年级"><option value="121">四年级(1)班</option>
<option value="127">四年级(2)班</option>
<option value="133">四年级(3)班</option></optgroup><optgroup label="五年级"><option value="122">五年级(1)班</option>
<option value="128">五年级(2)班</option>
<option value="134">五年级(3)班</option></optgroup><optgroup label="六年级"><option value="123">六年级(1)班</option>
<option value="129">六年级(2)班</option>
<option value="135">六年级(3)班</option></optgroup></select></div>
<div class="form-group grouped_select optional q_creater_id_eq"><select id="teacher-select-input" class="grouped_select optional cascade-select form-control" name="q[creater_id_eq]"><option value="">请选择学生</option>
<optgroup label="一年级(1)班"><option value="31">钟文</option>
<option value="40">邹峻熙</option>
<option value="44">朱梓晨</option></optgroup><optgroup label="一年级(2)班"></optgroup><optgroup label="一年级(3)班"><option value="41">侯晟睿</option></optgroup><optgroup label="三年级(1)班"><option value="33">龚思源</option>
<option value="43">曾思聪</option></optgroup><optgroup label="三年级(2)班"><option value="45">贾思淼</option>
<option value="45">贾思淼</option></optgroup><optgroup label="三年级(3)班"><option value="27">郑烨华</option>
<option value="31">钟文</option></optgroup><optgroup label="二年级(1)班"><option value="28">张鹏飞</option>
<option value="34">刘天翊</option>
<option value="40">邹峻熙</option></optgroup><optgroup label="二年级(2)班"><option value="28">张鹏飞</option></optgroup><optgroup label="二年级(3)班"></optgroup><optgroup label="五年级(1)班"><option value="27">郑烨华</option>
<option value="32">洪文轩</option>
<option value="35">雷博文</option>
<option value="43">曾思聪</option></optgroup><optgroup label="五年级(2)班"><option value="37">严烨磊</option></optgroup><optgroup label="五年级(3)班"><option value="36">马思远</option></optgroup><optgroup label="六年级(1)班"></optgroup><optgroup label="六年级(2)班"><option value="29">田瑞霖</option>
<option value="38">孔涛</option></optgroup><optgroup label="六年级(3)班"><option value="26">徐浩</option>
<option value="29">田瑞霖</option></optgroup><optgroup label="四年级(1)班"><option value="38">孔涛</option>
<option value="39">方立辉</option>
<option value="41">侯晟睿</option></optgroup><optgroup label="四年级(2)班"><option value="30">周峻熙</option>
<option value="30">周峻熙</option>
<option value="37">严烨磊</option>
<option value="42">林展鹏</option></optgroup><optgroup label="四年级(3)班"><option value="35">雷博文</option></optgroup></select></div>

using.js.coffee

$('#grade-select-input').cascadingSelect
    fetchNextNode: ($node)->
      $node.parent().nextAll('.form-group').map (_, element)->
        $(element).find 'select.cascade-select'