Question

我想在Rails中的一个选择列表中添加一个简单的onChange事件。我该怎么做呢？

这是选择框代码：

= f.select(:question_type_id, QuestionType.all.collect {|qt| [ qt.name, qt.id ]}, { :include_blank => "Please Select a Question Type" })

onChange事件应该调用一个函数fillAnswerNumber（），它接受当前选择的值，并根据结果将一堆选项添加到另一个选择列表。

编辑：我意识到我实际上需要一个onChange事件......

Answer 1

使用jquery，我会在客户端绑定事件（在文档加载时）。

$("#select_id").onclick(function(){});

除了明确定义一个id之外，在Rails中你没有什么需要做才能使它工作（但如果使用表单构建器，Rails会为你提供一个）

Answer 2

我想我已经明白了...感谢一些SO答案和一些方便的博客文章。

这就是我所拥有的。我的选择看起来像这样：

= f.select(:question_type_id, QuestionType.all.collect {|qt| [ qt.name, qt.id ]}, { :include_blank => "Please Select a Question Type" }, :onchange => "fillAnswerNumber();")

我的JavaScript（JQuery）代码如下所示：

:javascript
  function fillAnswerNumber(){
    var question_type_name = $("#question_question_type_id :selected").text()
    if(question_type_name == "Single Input"){
      $("#answer_number")
        .find('option')
        .remove()
        .end()
        .append($('<option selected="selected"></option>').val("1").html("1"))
        .append($('<option></option>').val("2").html("2"))
        .append($('<option></option>').val("3").html("3"))
        .append($('<option></option>').val("4").html("4"))
      ;
    }else if(question_type_name == "Multiple Choice"){
       $("#answer_number")
        .find('option')
        .remove()
        .end()
        .append($('<option></option>').val("3").html("3"))
        .append($('<option selected="selected"></option>').val("4").html("4"))
        .append($('<option></option>').val("5").html("5"))
        .append($('<option></option>').val("6").html("6"))
      ;
    }
  }

Answer 3

我想你需要添加jQuery live以观察selectbox更改并发送ajax请求以获取结果并将结果填充到另一个selectox中。

伪代码可能看起来像这样

$('#question_type_id').live('change',function(){
$.ajax({
    url: url_to_fetch_result,
    success: function(responseData) {
      populate your next select depending your resposeData here
    }
});

使用直播的优点是，即使您稍后动态加载$（'＃question_type_id'）选择框，也会触发选择框更改事件。

愿这个帮助

附加onChange事件以在Rails中选择列表

3 个答案: