Question

我有一个表单，每行都有下拉列表。 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元素上发生的事件的示例吗？

Answer 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

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

1 个答案: