0

在我的表单中，我有两个下拉框。

<%= f.input :movie_code, input_html: { class: "ajax_select2", onchange: "$.movies.movieChanged(this)" } %>  

<%= f.label :actor_name, required: true %>
<%= f.select :actor_code, choices, {}, {id: "actor_code_element", class: "select2"} %>

当我在第一个下拉列表中更改值时，函数 movieChanged 通过 ajax 获取电影的演员并重新填充第二个下拉列表。

movieChanged: function(element) {
    var $this = $(element);
    url = '/movie/' + $this.val() + '/actors/';

    $.getJSON(url, null, function(data, status, xhr) {
      $('#actor_code_element').empty(); //empty the list of options
      $('#actor_code_element').prop("selected", false);
      $.each($(data), function(index, value) {
        var option = $('<option />');
        option.attr('value', value.id).text(value.text);
        $('#actor_code_element').append(option); //add option
      });
    });
  }

我不能做的是在先前选择一个选项后重置第二个下拉列表的值。

例如：我选择低俗小说电影，塞缪尔·杰克逊和约翰·特拉沃尔塔出现。我选择塞缪尔。接下来我把电影改成肖申克的救赎。我重置了演员列表，但选定的演员仍然是约翰特拉沃尔塔。我想取消选择它并将其设置为空...

我正在阅读并尝试：

$('#actor_element').val('')
$('option', $('#category_code_element').attr('selected', false);

没有任何工作...

我该怎么做？

编辑：现在我意识到可能有一种 select2ish 的做事方式。我正在尝试改变它的工作方式，这可能就是它没有按预期工作的原因......在此先感谢。

4

2 回答 2

1 
$('#actor_element').val([])

应该正确重置选择。

编辑：啊，错过了你使用select2。

我会测试

$('#actor_element').trigger('change')

看看这是否能解决问题。

于 2013-04-05T10:39:59.293 回答
1

清空 select and set 属性 disabled 并在需要时启用它。

尝试这个

$('#actor_element').empty().attr('disabled','disabled');

见小提琴

于 2013-04-05T10:19:21.300 回答