Question

我正在开发Rails 5.1应用程序。我在应用程序中使用 chosen javascript插件，以使选择框更加用户友好。

在我的一个浏览页面中，我选择了2个选择框。一个用于项目，另一个用于任务。要求是在更改项目选择框时仅加载关联的任务。

我的视图

<div class="form-group pad-right-one">
    <%= f.collection_select :task_project_id_eq, @projects.order(:number), :id, :project_with_number, { include_blank: 'Project' }, {class: 'chosen-select', onchange: "populateTaskFieldWithOptions()"} %>
</div>
<div class="form-group pad-right-one">
    <%= f.collection_select :task_id_eq, @tasks.order(:project_id, :number), :id, :task_with_number, { include_blank: 'Task' }, {class: 'chosen-select'} %>
</div>

Js代码

我正在进行的Ajax调用是成功的，并且我正在获取所有的价值。

function populateTaskFieldWithOptions(){
    let projectId = $("#q_task_project_id_eq").val();
    $.ajax({
        type: "POST", 
        url: "/mail/getTasks",
        data: {project: projectId},
        success: 
        function(result){
            console.log("---Ajax Success----"); 
            document.getElementById('q_task_id_eq').selectedIndex = -1;
            var newOption = $('<option value="1">test</option>');
            $('#q_task_id_eq').append(newOption);
            $('#q_task_id_eq').trigger("chosen:updated"); 

           // Other options I tried ... 

           //$('#q_task_id_eq').trigger("liszt:updated");
           //$('#q_task_id_eq').val(' ').trigger('liszt:updated');
           //$('#q_task_id_eq').val(' ').trigger('chosen:updated');


        },
        error: 
        function(jqXHR, textStatus, errorThrown){
            console.log("---Ajax Error----")
            console.error('AJAX Error: ' + textStatus + errorThrown);
        }
      })
    };

我无法重置或更新所选的下拉菜单。

我们非常感谢您的帮助。提前致谢。

Answer 1

 $(".chosen-select").chosen("destroy");

无法在Rails应用中重置/更新jQuery选择的选项

1 个答案: