我正在尝试将选项添加到动态选择输入,具体取决于在另一个选择下拉列表中选择的值。
我已经设法在父级中选择值时填充数据对象.我的所有触发器也会被执行,子选择被禁用,并且应该包含数据对象中的所有值,但它没有填充任何选项。
JS(Coffeescript)代码段:
$ ->
$("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 = if $(this).has("option[value=]").size() then $(this).find("option[value=]") else $("<option value="">").text("Select a value")
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) ->
observer.append $("<option>").attr("value", object[key_method]).text(object[value_method])
observer.attr "disabled", false
最后一部分特别重要,因为这是 JSON 数据对象应转换为新选项的地方。这是在一种情况下响应的对象(根据Firebug):
{"rule_attributes":[{"id":25,"human_name":"Gender"},{"id":26,"human_name":"Age"}]}
在这种情况下,子项下拉列表应附加"性别"和"年龄"选项,但未追加任何内容。
更新 1
如果我替换这一行:
observer.append $("<option>").attr("value", object[key_method]).text(object[value_method])
....通过测试:
observer.append $("<option>New Option</option>")
将添加"新建选项"值。我注意到的一点是,即使我的每个对象中有两个选项,它也只添加一次。这可能是 JSON 对象的结构有问题吗?
更新 2一些广泛的日志记录在控制台中提供了以下详细信息:
console.log(object)
-> [Object { id=25, human_name="Gender"}, Object { id=26, human_name="Age"}]
console.log(key_method)
-> id
console.log(value_method)
-> human_name
console.log(object[key_method])
-> undefined
console.log(object[value_method])
-> undefined
更新 3
console.log(data)
-> Object { rule_attributes=[2]}
有什么想法吗?
更改 $.getJSON 回调中的每个调用
$.each data, (i, object) ->
自
$.each data.rule_attributes, (i, object) ->