Question

我的视图中有一个选择列表及其javascript函数。

<select class="sel_list_size" id="product", onchange="build_url('dynamic_div')">
    <%= options_for_select(get_product) %>
</select>

function build_url(div_var) {
    var selected_index = product.selectedIndex;
    var selected_value = product.options[product.selectedIndex].text;
    var selSpan = document.createElement('span');
    $.ajax({
      url: '/welcome/get_inner_dirs',
      type: 'GET',
      data: { value: selected_value }
    });
}

这是我的控制器方法。

def get_inner_dirs
    cmd = `curl #{@url}/#{params[:value]}/`
    result = JSON.parse(cmd)
    @inner_dirs = []
    result.map { |e| @inner_dirs.append(e['name']) }
    @inner_dirs
end

所以我的目标是使用@inner_dirs中的数据创建一个动态选择列表。有什么办法吗？预先感谢。

Answer 1

自从找到解决方案以来，我正在回答自己的问题。
我修改了控制器方法以返回json响应。

def get_inner_dirs
    @inner_dirs = []
    cmd = `curl #{@url}/#{params[:value]}/`
    result = JSON.parse(cmd)
    result.map { |e| @inner_dirs.append(e['name']) }
    render :json => @inner_dirs
end

我呈现动态选择列表的所有JavaScript都是（在代码中添加有关实现方式的注释）

function build_url(div_var) {
    var selected_value = product.options[product.selectedIndex].text;
    var selSpan = document.createElement('span');
    var MyTestData = '';
    // call the controller method using ajax. When the call succeeded 
    // assign the JSON response to a javascript variable (MyTestData) 
    function ajax() {
        return $.ajax({
            url: '/welcome/get_inner_dirs',
            type: 'GET',
            data: { value: selected_value },
            success: function(data){ MyTestData = data }
        });
    }
    // Ajax call will be done here.
    ajax().done(function() {
        // Temp variable to build a select list
        var selectHTML = '';
        selectHTML = "<select>";
        selectHTML += '<option></option>'
        // Use the Ajax response to add options inside the select list
        for (i = 0; i < MyTestData.length; i = i + 1) {
            selectHTML += '<option>' + MyTestData[i] + "</option>"
        }
        selectHTML += "</select>";
        // Creating HTML for select list is completed now we need to 
        // insert the HTML inside a div or span
        selSpan.innerHTML = selectHTML;
        // So this div_var will be a HTML Element id where we need to 
        // push the select list
        document.getElementById(div_var).appendChild(selSpan);
      }).fail(function(){
          alert('Ajax call Failed')
    });
 }

这就是我在HTML中使用javascript的方式

<select class="sel_list_size" id="product" onchange="build_url('dynamic_div')">
    <%= options_for_select(get_product) %>
</select>
<div id='dynamic_div'></div>

我在选择列表下方有一个空的div，当我们使用第一个选择列表选择某个值时，动态选择列表将被推送到其中

如何将Ruby变量分配给JavaScript

1 个答案: