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

Question

我正在 Play 框架中编写动态表单，但我对 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”。如何让新的select显示空白选项？

谢谢!

编辑 - 更新了我的代码以反射(reflect)我的 input 和 select 标记由 div 封装的事实

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/

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

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

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