0

我有茧宝石工作并在我的应用程序中正确添加\删除部分。我添加了动态下拉列表来过滤 cocoon 创建的部分中的选择标签。第一个下拉列表使用 javascript 过滤第二个下拉列表，但仅适用于 cocoon 创建和添加的第一个部分（项目）。谁能帮我弄清楚确保这对茧创建的每个部分都有效的最佳方法是什么，而且我可以根据我想要过滤的次数多次更改第一个下拉列表？

这是 cocoon 每次添加项目时创建的部分代码：

<script type="text/javascript">
    $('.div_add').bind('click', function() {
      var allOptions = $('#selectprod option')
      $('#selectcat').change(function () {
          $('#selectprod option').remove()
          var classN = $('#selectcat option:selected').prop('class');
          var opts = allOptions.filter('.' + classN);
          $.each(opts, function (i, j) {
              $(j).appendTo('#selectprod');
          });
       });

    });
</script>

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 form-font div_add">
  <div class="prodselectbox">
    <div class="floatleft cat">Board Type</div>
    <div class="floatleft catid">
      <select id="selectcat" name="board_type" class="ship_nice_select">
        <option value="" class="rhth">Select Board Type</option>
        <option>all options for first dropdown</option>            
        <option class="Some" id="selectionone">Some</option> 
        <option class="Some2" id="selectionone">Some2</option>       
      </select>
    </div>
  </div>  
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 form-font div_add">
  <div class="floatleft artid">Part Number</div>
  <div class="floatleft selectarticle">
    <select id="selectprod" name="part_num" class="ship_nice_select">
      <option value="" class="rhth23">Select Part Number</option>
      <% @items_some = Item.where(board_type: "Some") %>
      <% @items_some.each do |i| %>
        <option class="selectors Some">
          <%= i.part_num %>
        </option>
      <% end %> 
      <% @items_some2 = Item.where(board_type: "Some2") %>
      <% @items_some2.each do |i| %>
        <option class="selectors Some2">
          <%= i.part_num %>
        </option>
      <% end %>    
    </select>
  </div>
</div>
4

1 回答 1

0

您的视图代码似乎很不完整，但是从您的描述中我想我可以推断出会发生什么：您的 javascript 绑定到现有.div_add元素，当单击link_to_add_association并插入新的部分时，新插入的那些.div_add未绑定到单击处理程序。

两个选项：cocoon 允许在插入时附加回调（参见文档）

但在你的情况下，更好的解决方案是只写你的javascript有点不同：

$(document).on('click', '.div_add', function() {
  // your handler here
});

由于此处理程序附加到文档，因此对于动态添加.div_add到页面的元素，这将正常工作。

于 2018-05-31T12:44:55.407 回答