javascript - multiple dynamic drop down lists in form -
i have form drop down lists in each row. change in dropdown list on column must result in hiding field in column b in same row. here trimmed-down version of 1 row in table.
<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>
and here coffeescript try hide cost in case of '15 minute block'
set_duration_changes = () -> durations = find_all_duration_drop_downs() 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"
unfortunate event affects last row in table. need strategy explains steps should follow. can share me example of how define event occur on select element of correct table row?
i have solved problem defining jquery change event. have still plenty learn not surprised if following code can refactored:
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
Comments
Post a Comment