jQuery如何动态添加选择元素并重置选择？

Question

我正在 Play Framework 中编写一个动态表单，但我对 javascript 不是很有经验。我正在尝试构建允许动态添加字段的this jQuery example。我不想只添加一个文本字段，而是每次都添加一个文本字段和一个选择框。棘手的部分是即使有selected 项，我也希望重置动态添加的选择框。

这是我的尝试，使用this answer

 $('.multi-field-wrapper').each(function() {
   var $wrapper=$('.multi-fields', this);
   $(".add-field", $(this)).click(function(e) {
     var obj=$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
     // This following line is incorrect...
     obj.find('.blank').prop('selected', true).end().trigger('chosen:updated');
   }
   );
   $('.multi-field .remove-field',
   $wrapper).click(function() {
     if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove();
   }
   );
 }
 );

<form role="form" action="/wohoo" method="POST">
  <label>Stuff</label>
  <div class="multi-field-wrapper">
    <div class="multi-fields">
      <div class="multi-field">
        <div>
            <input type="text" name="stuff[]"/>
        </div>
        <div>
            <select>
              <option class="blank" value="">Select a car</option>
              <option value="saab">Saab</option>
              <option value="mercedes" selected>Mercedes</option>
              <option value="audi">Audi</option>
            </select>
        </div>
        <button type="button" class="remove-field">Remove</button>
      </div>
    </div>
    <button type="button" class="add-field">Add field</button>
  </div>
</form>

由于它使用clone() 功能，如果选择了“Mercedes”，那么动态添加的select 下拉菜单也会选择“Mercedes”。如何让新的selects 显示空白选项？

谢谢！

编辑 - 更新了我的代码以反映我的input 和select 标签被divs 封装的事实

Answer 1

“obj”变量成为此表达式末尾选择的输入节点：

var obj = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();

但是您应该使用选择节点来解决问题，在您的情况下，它是“obj”的兄弟。

 obj.siblings('select').find('.blank').prop('selected', true).end().trigger('chosen:updated');});

http://jsfiddle.net/xogeufa2/1/

此外，如果“输入”和“选择”节点被包裹在 div 标签中，它们就会失去兄弟关系。所以在这种情况下，你应该找到另一种方法，来获得“选择”。例如，通过父母：

obj.closest('.multi-field').find('select').find('.blank').prop('selected', true).end().trigger('chosen:updated');
    });

http://jsfiddle.net/2ymd7ug7/2/

Answer 2

您只需要删除从选项标签中选择的属性。

为此，您可以使用 removeAttr 方法

这是完成您所描述的完整代码。

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        var obj = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').end().find('option').removeAttr('selected').focus();
    });

    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});

刚刚在您的代码中添加了.end().find('option').removeAttr('selected') :)

我希望我能帮上忙..

在此处查找代码：https://jsfiddle.net/yrchyndk/