javascript - 使用 Rails 3 和 jQuery 进行动态选择

Question

我想使用 jQuery 动态填充下拉列表。我正在尝试调用 Controller 操作，但我不知道如何使用 collection_select 对象。我尝试过 :input_html 但 Controller 操作从未被调用。我在 javascript 调试器中收到解析错误，因为 javascript 正在尝试解析整个 View 页面。

View 中的代码:

<div id="ssmodels">
  <%= collection_select :ssmodel, :ssmodel, @ssmodels, :id, :name, :input_html => {:rel => "/phrases/update_submodel_select" }  %>
</div>

<div id="ssmodel_sssubmodel">
  <%= collection_select :ssmodel, :sssubmodel, @sssubmodels, :id, :name %>
</div>

Application.js 中的 JavaScript:

$.fn.subSelectWithAjax = function() {
  var that = this;
  this.change(function() {
    $.post(that.attr('rel'), {id: that.val()}, null, "script");
    return false;
  })
};

$(document).ready(function(){$("#ssmodels").subSelectWithAjax();
})


$(document).ready(function(){$("#ssmodel_sssubmodel").subSelectWithAjax();
})

请帮忙。

Answer 1

我认为最不显眼的方法是 js hook 是否不知道如何将所选值放入要调用的 url 中。

所以我解决了这个普遍问题:

application.js:在 livehook/documentready 函数的主体中:

$('select[data-observe-url]').change(function() {
     var selected = $(this).find(':selected').val();
     var url = $(this).attr('data-observe-url').replace('%(selected)',selected)
     $.get(url)
     return false;
});

然后你的 html 是:

<select id="signup_course_id" name="signup[course_id]" data-observe-url="http://localhost:3000/courses/%(selected)/select" >
<option value="">Choose Class</option>
<option value="1">excel 2007</option>
</select>

它是用 formattastic 生成的，例如:

form.input :course, :collection => Course.all, :include_blank => 'Choose Class', 
      :input_html => { 'data-observe-url' => select_course_url('%(selected)') }

将 %(selected) 视为 url 中类似格式字符串的参数，jquery 使用 $(this).find(':selected') 将其替换为所选值