表单中的多个动态下拉列表答案

【问题标题】：multiple dynamic drop down lists in form表单中的多个动态下拉列表
【发布时间】：2015-06-01 09:12:40
【问题描述】：

我有一个表格，每行都有下拉列表。 A 列下拉列表的更改必须导致 B 列中的字段隐藏在同一行中。这是表格中一行的精简版。

<form class="form-horizontal">
  <div class="form-group">
    <div class="duration">
      <select id="session_attributes_0_duration">
        <option value="0">15 minute block</option>
        <option value="1">30 minute block</option>
        <option value="2">1 hour block</option>
      </select>
    </div>
    <div class="cost>
      <input id="session_attributes_0_cost">
    </div>
  </div>

这是我的 CoffeeScript，我试图在“15 分钟阻塞”的情况下隐藏成本

set_duration_changes = () ->
  durations = find_all_duration_drop_downs()
  for duration in durations
    if duration.firstChild.tagName == "SELECT"
      $(duration).on 'change', duration, (evt) ->
        hide_cost(duration)

hide_cost = (duration) ->
  duration_in_words = find_choice(duration.firstChild)
    if duration_in_words == '15 minute block'
      cost = duration.nextSibling
      cost.style.display = "none"

不幸的是，该事件总是影响表中的最后一行。我真的需要一个策略来解释我应该遵循的步骤。谁能与我分享一个示例，说明如何定义将在正确表行的 SELECT 元素上发生的事件？

【问题讨论】：

标签： javascript coffeescript

【解决方案1】：

我通过定义一个 jQuery 更改事件解决了我的问题。我还有很多东西要学，所以如果可以重构以下代码，我不会感到惊讶：

set_session_duration_change_event = () ->
  $('.session-duration').on 'change', (e) ->
    durationList = $(this)
    durListId = durationList.attr('id')
    if !durListId 
      return
    duration_value = durationList.val();
    rowId = durListId.charAt(46)
    customDurId = 'care_service_care_service_sessions_attributes_' + rowId + '_custom_duration_4i'
    if (duration_value == "0") || (duration_value == "1") || (duration_value == "2")
      customDur = document.getElementById(customDurId)
      customDur.parentElement.className += " hidden"
    else
      customDur = document.getElementById(customDurId)
      customDur.parentElement.className = "custom-duration"
    return

【讨论】：