FORM

Question

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

我怎么能干这个？

FORM

<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中的所有选择输入以匹配在主服务器中选择的任何值。

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

Answer 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);

Answer 2

是的，因为@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);
  });
});

但完全！如果你可以用一堂课做的话！

Answer 3

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

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

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

干掉jquery函数

FORM

jquery函数如下所示：

3 个答案: