Question

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

我尝试使用this answer

执行此操作

＆＃13;

 $('.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();
   }
   );
 }
 );

＆＃13;

<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>

＆＃13;

由于它使用clone()功能，如果＆＃34;梅赛德斯＆＃34;被选中，然后动态添加select下拉列表也将有＆＃34;梅赛德斯＆＃34;选择。如何让新select显示空白选项？

谢谢！

编辑 - 更新了我的代码，以反映我的input和select标记由div封装的事实

Answer 1

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

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

但你应该选择select节点，在你的情况下它是“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/

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

2 个答案: