1

我有一个表单，其中包含许多按主题分组的选择输入。我对每个组都有一个主选择，允许用户将组中的所有选择设置为主值（等级是一种提供等级 1-8 的方法）。

我怎么能把它弄干？

形式

<label>Change all to:</label>
<%= select_tag "section_one", options_for_select(gradescales), :id => "section_one_master" %>
    
    <div id="section_one_wrapper">
      <%= f.input :item_one,   :collection => gradescales %>
      <%= f.input :item_two,   :collection => gradescales %>
      <%= f.input :item_three, :collection => gradescales %>
      <%= f.input :item_four,  :collection => gradescales %>
    </div>

jquery 函数看起来像：

$("#section_one_master").change( function() { 
   var a = $("#section_one_master").val(); 
   $("#section_one_wrapper select").val(a);
 });

$("#section_two_master").change( function() { 
   var a = $("#section_two_master").val(); 
   $("#section_two_wrapper select").val(a);
 });    

 ...again, and again

因此，当 section_one_master 更改时，该函数会被触发，并且 section_one_wrapper div 中的所有选择输入都会更改以匹配主控中选择的任何值。

我有很多组，每个组都有一个主选择输入。我怎么能干这个最多一个函数，然后动态地识别首先调用该函数的主节点并使用约定来更改选择的适当分组？

4

3 回答 3

1

您可以将类添加到主部分元素：

$(".section-masters").change( function() {  
    var id = this.id.replace('master', 'wrapper');   
    $('#' + id + " select").val(this.value);
});

请注意，在更改处理程序this引用元素的上下文中，您不必重新选择元素。

您还可以选择部分包装元素并缓存对象和使用filter方法，通过缓存对象，您只需选择一次这些元素，这比重新选择它们要好。

var $wrappers = $('.section-wrappers');
//...
$wrappers.filter('[id="' + id + '"]').val(this.value);
于 2013-01-04T01:27:24.297 回答
1

是的，正如@Blazemonger 所说，你可以使用一个类，它会有很大帮助

但你也可以这样做

var foos = ['one', 'two'];

$.each(foos, function(index, elem){
  var $selector = $("#section_" + elem + "_master");
  $selector.change( function() { 
   var a = $selector.val(); 
   $("#section_" + elem + "_wrapper select").val(a);
  });
});

但是完全！如果你可以使用一个类做它！

于 2013-01-04T01:29:11.853 回答
0

我最终为每个 master 添加了一个类和一个 id，并将每个部分包装在一个 id 中。然后在我的咖啡脚本中：

  $(".master_change").change -> $("div##{@.id}_section select").val $(@).val()

该脚本由任何 .master_change 触发，它从 'this' 中获取 id，然后将其添加到 '_section' 中，后者获取该部分选择的包装器......然后当然会更改它们的所有值以匹配主人。12线对1线！

于 2013-01-17T01:32:54.547 回答