如何从下拉列表中传递所选值并将其作为在Rails中级联下拉列表的参数进行访问 [英] How to pass selected value from dropdown and access it as a parameter for cascading dropdowns in rails

查看:89
本文介绍了如何从下拉列表中传递所选值并将其作为在Rails中级联下拉列表的参数进行访问的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试实现级联下拉菜单.

Edited: I am trying to achieve cascading dropdown.

在我的第一个下拉列表中,我得到了所有不同的名称.

In my 1st dropdown, I get all the distinct Names.

<%= f.input :names, collection: names.distinctnames, :label => "Select Name" %>

选择名称时,如何访问该值并将其传递给控制器​​/模型,以便我可以基于这些值进行过滤并将其绑定到下一个下拉列表.

On selecting the name, how to access the value and pass it to controller/model so that I can filter based on the values and bind it to the next dropdown.

在我的模型中,我具有以下范围

In my Model, I have the following scope

scope :distinctnames, ->{ Names.distinct.pluck(:names)}

在这里,我要添加另一个范围,该范围为所选名称提供城市.

Here, I want to add another scope that gives the cities for the selected name.

因此,我将如何获取在视图中选择的数据并在下一个下拉列表中获取所有值.

So, how would I get the data selected in my view and get all the values in the next dropdown.

如果这是错误的方法,有人可以用和示例来建议我另一种方法.

If this is the wrong approach, can someone suggest me the alternative one with and example.

我的代码

<!DOCTYPE html>
<html>
<head>
  <script>
        $(document).on('change', '#names_id', function(){
          var custId = $(this).val();
          return custId;

        });
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <div class="panel panel-primary">
        <div class="panle-heading">Panel Primary</div>
        <div class="panel-body">
          <%= simple_form_for @ruby, url:{action: 'create'}, html: {class: 'form'}  do |f| %>
            <%= f.select :names_id, options_for_select(Names.distinctnames), {}, {:multiple => true} %>
            <%= f.select :city_name, options_for_select(Names.where(names_id: custId).pluck(:city_name)), {}, {:multiple => true} %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
<div>
</body>
</html>

这里,在加载视图时,我得到了未定义的局部变量或方法"custId",用于#<#

如何将所有其他下拉列表加载为空,然后将所选下拉列表中的值绑定到第二个下拉列表.

Here, at the time of loading the the view I get undefined local variable or method `custId' for #<#

How to load the all other dropdowns empty and then bind the value from the selected dropdown value to the second one.

推荐答案

据我所知,您有多个下拉列表,但获得的依赖项(如drop-down list 1中的selected值)将影响,在这种情况下,到达控制器操作将需要提交表格,如果我在想的是对的,我有多个想法:

So as I understand, You got more than one drop down list but the got dependency, Like selected value from drop-down list 1 will affect values in drop-down list 2, In this case reaching the controller action will need the form to be submitted, If what I'm thinking about is right I have more than one idea:

第一个

您将使用javascriptJQuery库将这种动态行为添加到您的页面,场景将是这样的:

You will use javascript or JQuery library to add this dynamic behavior to you page, the scenario is going to be like this:

1-用户将选择值

2- select时使用js触发actionListner.

3-向服务器发送请求

3- send a request to the server

4-根据您发送到服务器的参数获取数据

4- get data according to parameters you sent to the server

5-绑定服务器返回的数据后,启用下一个下拉列表.

5- enable the next drop-down list after binding returned data from the server.

此解决方案不需要您刷新页面,我认为这会使用户感到满意.

This solution won't need you to refresh the page, Which I think will make user satisfied.

第二个解决方案

您将在drop-down上放置actionListner并在用户选择值时提交表单.

You will put actionListner on drop-down and submit the form when user select value.

这将需要在服务器端进行一点验证,如果有其他输入,则需要付出一些努力来保存已填充的数据(将它们保存在实例变量中,我的意思是像@select_drop_1,并以用户身份在输入中使用它们会觉得价值观没有被遗忘).

This gonna need a little bit validation in you server-side plus a little bit effort to save data that was filled if there is other inputs(saving them in instance variables I mean like @select_drop_1 and use them in inputs as user gonna feel that values are not missed).

第三种解决方案

如果在用户打开表单后就可以使用此数据,那么我的意思是grouping该数据,进行按这些不同名称对城市进行分组的查询,这样,当用户选择一个名称时, js代码将运行,以启用数据并将其绑定到下一个drop-down,依此类推.

If it is applicable that you make this data available once user opened the form, By this I mean grouping this data, Making a query that groups cities by these distinct names, So that when user select a name, a simple js code will run enabling and binding data to the next drop-down and so on.

如果我是您,我会选择firstthird选项,请原谅我,因为我不知道您的应用程序的架构,不知道它是否适用于使grouping我以为Names已经摆在桌子上了,还有另外一个叫City.

If I were you I would choose either first or third option, Pardon me because I don't know the schema of your application, I don't know if it is applicable to make grouping I'm imagining that Names got its table and there is another one called City.

希望它会有所帮助.

这篇关于如何从下拉列表中传递所选值并将其作为在Rails中级联下拉列表的参数进行访问的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆