将 onChange 事件放在选择框中

Posted 2023-05-09

【中文标题】将 onChange 事件放在选择框中

【英文标题】：Put onChange event in a select box

【发布时间】：2017-07-06 00:49:45

【问题描述】：

我试图在选择框中放置一个 onchange 事件，但由于某些奇怪的原因它不起作用。这是我的选择框：

  <%= f.label :Tipe, "Tipe:", class: "control-label col-md-1"  %>
    <div class="col-md-3">
     <%= f.select :Tipe, ['Mont','Vol'],onChange: "myFunction()", class: "form-control"%>
    </div>

这是我的javascript：

<script>
function myFunction() 
  alert( "Handler" );

</script>

【问题讨论】：

<%= form.select :Tipe, ['Mont','Vol'], , :onChange=>"myFunction();" , class: "form-control" %>

【参考方案1】：

内联 javascript 被认为是不好的做法，因为这样的原因很难调试。也许你应该尝试：

在您的页面 js 文件或脚本标签中 - 以两者为准：

var myFunction = function()
  // do whatever


$('.form-control').on('change', function()
    myFunction();
);

'on' 事件监听器允许将任何事件绑定到元素类/ id。更好的是，绑定到父元素的 id，您可以确保事件保持连接到可能由 ajax 请求不时刷新的子事件。例如

# parent html.erb file
<div id="container">
  <%= render 'form' %> 
</div>

# inside form partial
<%= f.label :Tipe, "Tipe:", class: "control-label col-md-1"  %>
<div class="col-md-3">
  <%= f.select :Tipe, 
    ['Mont','Vol'],
    onChange: "myFunction()", 
    class: "form-control"
  %>
</div>

# then in JS
$('#container').on('change', '.form-control', function()
  //do something
);

否则，我认为您的功能无法正常工作，因为您缺少分号：

"onChange: "myFunction();"

如果没有，请检查 'onChange'/'change' 绑定。什么是“改变”？如果要在一些用户交互后执行操作，您可能会更好地使用“点击”。

希望这会有所帮助。