Javascript 基于selectbox选择栏5显示Div时出现问题

我正在开发一个Rails 5 Ruby 2.4.0应用程序。一个快速的工作流程是，用户选择一个手机制造商，并被重定向到相应的“显示”页面，在该页面中，他们会遇到一个动态创建的带有手机型号的选择框，他们选择一个型号，下面会出现一个div，要求确认这是他们的设备型号

截至目前，我有选择框，它填充（代码如下），但当我选择一个设备时，相应的div不会出现。我不确定哪里出了问题，不管是选择框、div还是javascript

我的选择框如下所示：

选择您的设备
选择设备

我的Div如下：

我的Javascript如下所示：

$（document）.on（'change'，'.div toggle'，function（）{
var target=$（this.data（'target'）；
var show=$（“选项：选中”，this）。数据（'show'）；
$（target.children（）.addClass（'不可见'）；
$（show.removeClass（'invisible'）；
}):
$（文档）.ready（函数（）{
$（'.div toggle'）。触发器（'change'）；
});

我似乎没有收到任何控制台错误，也不确定哪里出了问题。我对javaScript也比较陌生，任何帮助都将不胜感激

---

提前谢谢

结果是我有一个：而不是一个；这使得javaScript无法正常运行

<div class="form-group">
  <label for="deviceSelect">Select Your <%= @manufacturer.name.titleize %> Device</label>
  <select class="form-control div-toggle" data-target=".device-names">
    <option>Select Device</option>
    <% @devices.each do |device| %>
      <option value="<%= device.device_name %>" data-show=".<%= device.device_name %>"><%= device.device_name.titleize %></option>
    <% end %>
  </select>
</div>

<div class="device-names">
  <% @devices.each do |device_div| %>
      <div class="<%= device_div.device_name %> invisible">
        <%= device_div.device_name %>
      </div>
  <% end %>
</div>

<script type="text/javascript">
  $(document).on('change', '.div-toggle', function() {
    var target = $(this).data('target');
    var show = $("option:selected", this).data('show');
    $(target).children().addClass('invisible');
    $(show).removeClass('invisible');
  }):
  $(document).ready(function() {
    $('.div-toggle').trigger('change');
  });
</script>