Question

我正在尝试创建一个带有select标签的表单...当用户将其推到下面的相同表单重复时，我也有一个重复的表单按钮。

我的问题是当表单重复并且用户使用select标签时（当用户选择某个值时我有一些jQuery ....有这个fadeIn()它使用相同的类，所以两个select标签当我需要它是彼此的个体时，我们正在一起工作。

这是我正在处理的小提琴的链接：http://jsfiddle.net/d0okie0612/ThnKc/

这是我的HTML

  <select id="print_size_options_LargeFormatBlackWhite">
    <option value="">1</option>
    <option value="">2</option>
    <option value="customSize">3</option>
   </select>

   <div class="custom_size" style="display: none;">
     Hello
   </div>

   <br />
   <br />
   <br />
   <select id="print_size_options_LargeFormatBlackWhite">
     <option value="">1</option>
     <option value="">2</option>
     <option value="customSize">3</option>
   </select>

   <div class="custom_size" style="display: none;">
     Hello
   </div>

这是jQuery：

    $("#print_size_options_LargeFormatBlackWhite").change(function(evt) {
      var selected;
      selected = $(this).val();
      if (selected === "customSize") {
      return $(".custom_size").fadeIn();
      } else {
      return $(".custom_size").fadeOut();
       }
       }).change();

所以我只希望每个不同的选择标签都有独立的行为......我不能将它分配给不同的类，因为用户可能会复制表格10次.......

我显然是jQuery的新手，所以如果你可以帮助我，那就太棒了

由于

Answer 1

对同一页面中的多个实例使用相同的ID是无效标记，它不会那样工作。你必须做这样的解决方法：

var i=0;
$('a').click(function () {
    $('select').last().clone().attr('id', 'print_size_options_LargeFormatBlackWhite'+ i++).appendTo('body');
     $('.custom_size').last().clone().hide().appendTo('body');
});
$('select').each(function (i, v) {
   $(this).attr('id', $(this).attr('id') + i);
});
$(document).on('change', '[id^="print_size_"]', function (evt) {
  var selected;
  selected = $(this).val();
  if (selected === "customSize") {
     $(this).next(".custom_size").fadeIn();
  } else {
     $(this).next(".custom_size").fadeOut();
  }
}).change();

CHECK THIS FIDDLE

随着你的评论：

您必须将事件委托给父元素或$(document)。

Answer 2

试试这个：

$(document).on("change", "#print_size_options_LargeFormatBlackWhite",function(evt) {
    var selected, index;
    selected = $(this).val();
    index = $("select").index(this);
    if (selected === "customSize") {
        $($(".custom_size")[index]).fadeIn();
    } else {
        $($(".custom_size")[index]).fadeOut();
    }
});

不知道为什么我必须包装索引，但我做了。

P.S。这是一个小提琴http://jsfiddle.net/Dtwigs/ThnKc/2/

如果选择了值则jQuery选择选项然后fadeIn（）

2 个答案:

CHECK THIS FIDDLE