Question

我使用selectize.js插件有一个Rails 5，ruby 2.4.0，bootstrap 4 alpha 6 app。

我要做的是根据选择框中的所选项目显示设备信息。

目前，当页面加载时，div应该是隐藏的，并且显示选择框（应该是），但是当我选择除第一个选择选项之外的任何内容时，它不会更改div中的设备。

我是一个java / ajax noob，我迷失了解决方案。任何帮助将不胜感激！

我的选择框：

  <select class="form-control div-toggle" id="select-device" data-target=".device-names">
    <option>Select Device</option>
    <% @devices.each do |device| %>
      <option value="<%= device.id %>" show=".<%= device.device_name %>"> <%= device.device_name.titleize %></option>
    <% end %>
  </select>

我的Div将在每个设备选中后显示和显示：

<div class="container device-names">
  <% @devices.each do |device_div| %>
    <div class="<%= device_div.id %> invisible" id="result">
      <div class="phoneDetailsContainer">
        <div class="row">
          <div class="col-sm-12">
            <center><h5 class="deviceHeader"><%= device_div.manufacturer.name.titleize %> | <%= device_div.device_name.upcase %></h5></center>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 hidden-sm-down"></div>
          <div class="col-sm-12 col-md-4" id="deviceDivImageContainer">
            <center>
              <% if device_div.image.present? %>
                <%= image_tag device_div.image_url(:thumb), :class => "deviceImage" %>
              <% else %>

              <% end %>
            </center>
          </div>
          <div class="col-md-4 hidden-sm-down"></div>
        </div>
        <div class="row">
          <div class="col-sm-12 col-md-4"></div>
          <div class="col-sm-12 col-md-4">
            <center>
              <span class="proceedDisclaimer">By clicking this button you agree that this is the device in your possession</span>
              <%= link_to "Proceed to Carrier Selection", manufacturer_device_path(@manufacturer, device_div), class: 'btn btn-outline-primary proceedButton', :id => "proceed" %>
            </center>
          </div>
          <div class="col-sm-12 col-md-4"></div>
        </div>
      </div>
    </div>
  <% end %>
</div>

我的javaScript在选择项目时调用div：

<script type="text/javascript">
  var ready = function () {
    // add code here
      $('#result').hide();

      $('#select-device').selectize({

      });

      $('#select-device').change(function(){

        $('#result').show().removeClass('invisible')
      });
    //end code here
  }

  $(document).ready(ready);
  $(document).on('page:load', ready);
  $(document).on('turbolinks:load', ready);
</script>

非常感谢任何帮助！如果需要进一步的信息，请告诉我！

Answer 1

现在，$（'＃result'）的jQuery选择器将返回与您的选择器匹配的所有元素的数组。您想要找到具有该项ID的类的那个。您可以将目标传递给像这样的函数

  $('#select-device').change(function(e){
     id = $(e.target).val()
     $('.' + id).removeClass('hidden')
  }

根据selectbox输入rails 5和select.js插件动态渲染div

1 个答案: