如何将 ruby 变量分配给 javascript

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，当我们使用第一个选择列表选择某个值时，动态选择列表将被推送