Question

我已按照this教程获取在Rails 4中使用的从属选择表单。

我可以确认正在触发AJAX请求，并在从父选择输入中选择一个值后成功返回子结果。 Firebug和手动输入所请求的URL都证实了这一点。手动路由到URL返回：

{"rule_attributes":[{"id":2,"human_name":"Age"},{"id":1,"human_name":"Gender"}]}

我的表单代码（使用simple_form＆amp; haml）：

= f.input :rule_attribute_id,
            :collection => [],
            :label_method => :human_name , 
            :value_method => :id,
            :input_html => {"data-option-dependent" => true,"data-option-observed" => "rule_model_dropdown","data-option-url" => "/rule_models/:rule_model_id:/rule_attributes.json","data-option-key-method" => :id,"data-option-value-method" => :human_name}

这是我的coffeescript代码，应该从json结果中处理子选项填充：

  if observed.val()
    url = url_mask.replace(regexp, observed.val())

    $.getJSON url, (data) ->
      $.each data, (i, object) ->
        observer.append $("<option>").attr("value", object[key_method]).text(object[value_method])
        observer.attr "disabled", false

在上面列出的案例中，我希望孩子将年龄和性别作为选项（根据JSON）。由于某种原因，值不会作为选项填充，并且子项没有选项。

任何人都可以帮助我做错了什么以及如何让孩子填充JSON传递的数据？

更新

我的js中的其他方法如下所示：

observer_dom_id = $(this).attr("id")
observed_dom_id = $(this).data("option-observed")
url_mask = $(this).data("option-url")
key_method = $(this).data("option-key-method")
value_method = $(this).data("option-value-method")

更新2 这是完整的js文件：

$ ->
  $("select[data-option-dependent=true]").each (i) ->
observer_dom_id = $(this).attr("id")
observed_dom_id = $(this).data("option-observed")
url_mask = $(this).data("option-url")
key_method = $(this).data("option-key-method")
value_method = $(this).data("option-value-method")
prompt = $("<option value=\"\">").text("Select a value")
regexp = /:[0-9a-zA-Z_]+:/g
observer = $("select#" + observer_dom_id)
observed = $("#" + observed_dom_id)

observer.attr "disabled", true  if not observer.val() and observed.size() > 1

observed.on "change", ->
  observer.empty().append prompt

  if observed.val()
    url = url_mask.replace(regexp, observed.val())

    $.getJSON url, (data) ->
      $.each data, (i, object) ->
        # console.log(data)
        observer.append $("<option>").attr("value", object[key_method]).text(object[value_method])
        observer.attr "disabled", false

选择选项不显示

0 个答案: