【问题标题】:Select & onChange | Ruby on Rails选择 & onChange | Ruby on Rails
【发布时间】:2014-07-04 09:50:41
【问题描述】:

在我看来,我有这个带有选择功能的表单:

<form id="form_id">
<%= form.select('id','name',  @document.informations.find(:all).collect {|u| [u.name] },
        options={},{:onChange => 'submit()'}) -%>
</form>

如何在视图的其余部分使用所选名称?

我在其他主题中看到了这一点:

$('#id_name').val();

但它对我不起作用,它说:

`$(' is not allowed as a global variable name

【问题讨论】:

    标签: ruby-on-rails forms select


    【解决方案1】:

    您收到该特定错误是因为 $('#id_name').val() 是 JavaScript,而不是 Ruby,但您已将其放在 erb 标记中。

    当您在浏览器中访问页面/documents/3 时,Rails 将在您的控制器中运行代码,并将一些 HTML 发送回您的浏览器。该 HTML 可以加载 CSS 和 JavaScript,但它会在您的 Ruby 程序完成后运行 - 并且可能根本不会运行,具体取决于浏览器。如何在视图中使用所选项目的名称取决于您正在使用它做什么。

    如果您将它存储在数据库中的某个位置,那么您应该首先让它在 Ruby 中工作。例如,如果您的@document 具有selected_informations 属性,您可以在页面的其余部分使用它,并将其传递给您的form.select 以在页面中预先选择它。 The Rails Guides documentation has more info on this.

    如果您没有将它存储在数据库中,那么您可以在您的盒子发生变化时使用 JavaScript 来获取它的值。下面是一些示例代码,当 &lt;select&gt; 框发生更改时,它会将所选项目的名称打印到 JavaScript 控制台。我已将它包含在&lt;script&gt; 标记中,因此您可以将其直接放入您的视图中进行测试,但如果您将其用于您的项目,则应将其放入专用的 JavaScript 文件中。

    <script>
    $('select').on('change', function(ev) { 
        var selected_item = $(ev.currentTarget).val();
        console.log("Your select value is " + selected_item);
    });
    </script>
    

    最后要注意的是,您现有的form.select 标签设置为在其值发生更改时调用方法submit()submit 只是一个名称,因此该函数 可以 做任何事情......但我猜它在选择项目时提交表单。这会向您的 Rails 服务器发送请求并刷新页面,因此请注意 - 如果您在 change 上使用事件侦听器来更新当前页面,您将不会在新的刷新页面上看到这些更改(并且应该请改用服务器端解决方案)。

    【讨论】:

    • 感谢您的解释。但是示例代码对我不起作用。它根本不会改变任何东西。
    • 示例代码不会改变你的页面;它会将内容打印到 JavaScript 控制台,因此您可以看到获取值的示例。这是ChromeFirefox 的说明。
    • 太好了,我明白了!但是没有任何简单的方法可以直接在我的视图中打印所选值?
    • 在您的 Rails 视图中?不会。Ruby 运行您的代码并将 HTML 发送到浏览器,然后就完成了。那时用户还没有选择任何东西;在您的视图中没有可打印的内容。如果您的 Rails 应用程序正在存储所选项目,那么您可以直接在视图中呈现它。或者,您可以使用 JavaScript 在浏览器中更新页面,或者将表单提交回您的 Rails 应用程序以呈现新页面。
    • 好的,谢谢,我试试表单提交方案。
    猜你喜欢
    • 1970-01-01
    • 2010-11-04
    • 1970-01-01
    • 2023-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-31
    • 1970-01-01
    相关资源
    最近更新 更多