rails select级联

首先自定义input表单：

class TaxonSelectInput < SimpleForm::Inputs::CollectionSelectInput  include ActionView::Helpers::FormTagHelper  def input(wrapper_options = nil)    data = options[:data] || {}    class_name = self.class.name.underscore.dasherize    template.content_tag(:div, class: "taxon-picker #{class_name}", data: data) do      template.concat(        select_tag(:"#{attribute_name}_taxonomies", nil, class: 'taxonomies')      )      template.concat(        select_tag(:"#{attribute_name}_taxons", nil, class: 'taxons')      )      template.concat super(wrapper_options)    end  endend

因为数据库设计问题，我这里需要2个不同的下拉

js开发

const Cache = {}const root = ''export default class TaxonPicker {  static defaults = {    taxonomiesUrl: '/api/xxx',    taxonsUrl: '/api/xxx',    taxonChildrenUrl: '/api/xxx'  }  /**   * Creates a new instance of a china district picker.   * @class   * @param {jQuery} element - jQuery object to make into a picker.   * @param {Object} options - Overrides to the default plugin settings.   */  constructor(element, options) {    this.$element = element    this.options = $.extend({}, TaxonPicker.defaults, this.$element.data(), options)    this.taxon_id = `${this.options.taxon_id}`    this.selectedData = {      selectedTaxonomy: null,      selectedTaxon: null,      selectedTaxonChildren: null,    }    this.$taxonomies = this.$element.find('.taxonomies')    this.$taxons = this.$element.find('.taxons')    this.$taxonChildren = this.$element.find('.taxon_children')  }  init() {    this.loadTaxonomies()    this.attachEvents()    this.$taxonChildren.addClass('hide')    // this.test()  }  attachEvents() {    this.$taxonomies.on('change', () => {      this.selectedData.selectedTaxonomy = this.$taxonomies.val()      this.selectedData.selectedTaxon = null      this.selectedData.selectedTaxonChildren = null      this.$taxons.empty()      this.$taxonChildren.empty()      this.loadTaxons(this.selectedData.selectedTaxonomy)        .then(() => {          this.$taxonChildren.empty()        })    })    this.$taxons.on('change', () => {      this.selectedData.selectedTaxon = this.$taxons.val()      this.selectedData.selectedTaxonChildren = null      this.$taxonChildren.empty()      this.loadTaxonChildren(this.$taxons.val())    })    this.$taxonChildren.on('change', () => {      this.selectedData.selectedTaxonChildren = this.$taxonChildren.val()    })  }  loadTaxonomies = () => {    let ret    if (Cache[root]) {      ret = Promise.resolve(Cache[root])    } else {      ret = $.get(this.options.taxonomiesUrl).then((divisions) => {        Cache[root] = divisions        return divisions      })    }    return ret.then((taxonomies) => {      this.resetOptions(        this.$taxonomies,        taxonomies,        this.selectedData.selectedTaxonomy      )    })  }  loadTaxons = (taxonomyId) => {    let ret    if (Cache[taxonomyId]) {      ret = Promise.resolve(Cache[taxonomyId])    } else {      ret = $.get(this.options.taxonsUrl, { id: taxonomyId }).then((divisions) => {        Cache[taxonomyId] = divisions        return divisions      })    }    return ret.then((taxons) => {      this.resetOptions(        this.$taxons,        taxons,        this.selectedData.selectedTaxon      )    })  }  loadTaxonChildren = (parentId) => {    let ret    if (Cache[parentId]) {      ret = Promise.resolve(Cache[parentId])    } else {      ret = $.get(this.options.taxonChildrenUrl, { id: parentId }).then((divisions) => {        Cache[parentId] = divisions        return divisions      })    }    return ret.then((taxonChildren) => {      this.resetOptions(        this.$taxonChildren,        taxonChildren,        this.selectedData.selectedTaxonChildren      )    })  }  resetOptions = ($selector, divisions, selectedId) => {    $selector.empty()    let collection = divisions    const isSubSelector = $selector    if (isSubSelector && divisions.length === 0) {      collection = Cache[root].filter((division) => division.id)      $selector.addClass('hide')    } else {      $selector.removeClass('hide')    }    collection.forEach((division) => {      const optionElement = $(document.createElement('option'))      const attributes = {        value: division.id,        selected: `${selectedId}` === division.id      }      optionElement.attr(attributes).text(division.name)      $selector.append(optionElement)    })  }}

使用：

<%= f.input :taxon_id,                    as: :taxon_select,                    input_html: { class: "taxon_children" },                    data: { 'taxon_id': f.object.taxon_id, 'level': 3 },                    label_html: { for: "taxons" },                    label: '产品分类' %>