Skip to content

Instantly share code, notes, and snippets.

@yshmarov
Created May 30, 2021 17:26
Show Gist options
  • Save yshmarov/6dc040db5578f31f7405c3a5ae387afb to your computer and use it in GitHub Desktop.
Save yshmarov/6dc040db5578f31f7405c3a5ae387afb to your computer and use it in GitHub Desktop.
conditional dropdowns with stimulus and jquery (bad approach)
= simple_form_for @valuation, html: { data: { controller: 'valuation' } } do |f|
= f.input :tenure_id, collection: Tenure.all, input_html: { id: 'tenure_dropdown', data: { action: 'change->valuation#toggleTenure' } }
#tenure
= f.input :is_remaining_term_less_than_85_years, as: :select, input_html: { id: 'timeleft_dropdown', data: { action: 'change->valuation#toggleTimeleft' } }
#timeleft
= f.input :remaining_term_details
import { Controller } from 'stimulus'
import $ from 'jquery'
export default class extends Controller {
connect () {
this.toggleTenure()
this.toggleTimeleft()
}
toggleTenure () {
const type = $('#tenure_dropdown').find('option:selected').text()
const tenure = $('#tenure')
if (type === 'Long Leasehold') {
tenure.show()
} else {
tenure.hide()
}
}
toggleTimeleft () {
const type = $('#timeleft_dropdown').find('option:selected').text()
const timeleft = $('#timeleft')
if (type === 'Yes') {
timeleft.show()
} else {
timeleft.hide()
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment