Question

我想为每个动态添加的fildset设置一个名称，该名称来自select标签。例如，我从选择列表中选择了一个产品，该名称被捕获为fieldset的图例..然后我按下添加按钮添加另一个字段集，当我从选择列表中选择一个新名称时，同名保留所有的字段集。

这是我的代码

HTML：

＆＃13;

 $("select[name='brand']").change(function () {
       
            var selectedText = $(this).find("option:selected").text();
            $(".test").text(selectedText);

    });
 $(function()
    {
        $(document).on('click', '.btn-add', function(e)
        {
            e.preventDefault();

            var controlForm = $('.controls:first'),
                currentEntry = $(this).parents('.entry:first'),
                newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val('');
            controlForm.find('.entry:not(:last) .btn-add')
                .removeClass('btn-add').addClass('btn-remove')
                .removeClass('btn-success').addClass('btn-danger')
                .html('<span class="glyphicon glyphicon-minus"></span>');
        }).on('click', '.btn-remove', function(e)
        {
            $(this).parents('.entry:first').remove();

            e.preventDefault();
            return false;
        });
    });

＆＃13;

@import url('http://getbootstrap.com/3.3.7/assets/css/bootstrap.css')
.container {
    margin-top: 10px;
}

.nav-tabs > li {
    position: relative;
}

.nav-tabs > li > a {
    display: inline-block;
}

.nav-tabs > li > span {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 6px;
    top: 8px;
    color: red;
}

.nav-tabs > li:hover > span {
    display: inline-block;
}

fieldset {
    border: 1px solid #ddd !important;
    margin: 0;
    xmin-width: 0;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    background-color: #f5f5f5;
    padding-left: 10px!important;
}

legend {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
    width: 35%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 5px 5px 10px;
    background-color: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="controls">
	<div class="entry">
		<div class="form-group">
			<select id="brand" name="brand" class="selectpicker" data-width="100%" data-none-selected-text="Nothing selected" data-live-search="true" tabindex="-98">
				<option value=""></option>
				<option value="1">Alcatel</option>
				<option value="2">Samsung</option>
				<option value="3">Nokia</option>
				<option value="4">Apple</option>
				<option value="5">LG</option>
				<option value="6">Sony</option>
				<option value="7">Huawei</option>
				<option value="8">Oppo</option>
				<option value="9">WIKO</option>
				<option value="10">ACCENT</option>
			</select>
			<span class="input-group-btn">
				<button class="btn btn-success btn-add" type="button">
					<span class="glyphicon glyphicon-plus"></span>
			</button>
			</span>
		</div>
		<div class="form-group">
			<fieldset class="">
				<legend  class="test"></legend>
				<ul class="nav nav-tabs" role="tablist">
					<li class="active"><a href="#contact_01" data-toggle="tab">Samsung A3</a><span>x</span>
					</li>
					<li><a href="#contact_02" data-toggle="tab">Samsung A4</a>  <span> x </span>
					</li>
					<li><a href="#" class="add-contact">+ Add product</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
					<div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
				</div>
			</fieldset>
		</div>
	</div>
</div>

＆＃13;

https://jsfiddle.net/aymanP/s5bud321/

Answer 1

正在添加动态元素。您的select事件处理程序无法正常工作。因为它是＆＃34;直接＆＃34;绑定只会将处理程序附加到已存在的元素。它不会受到未来创建的元素的约束。要做到这一点，你必须创建一个＆＃34;委托＆＃34;使用on()进行绑定。

当您使用.test class $(".test").text(selectedText);时，此语句会将文本更改为所有.test类。所以需要在当前的fieldset中找到该类。使用parents()我们就可以做到。

＆＃13;

$('.controls').on('change', "select[name='brand']", function() {
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.entry').find(".test").text(selectedText);

});

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

＆＃13;

@import url('http://getbootstrap.com/3.3.7/assets/css/bootstrap.css') .container {
  margin-top: 10px;
}

.nav-tabs>li {
  position: relative;
}

.nav-tabs>li>a {
  display: inline-block;
}

.nav-tabs>li>span {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 8px;
  color: red;
}

.nav-tabs>li:hover>span {
  display: inline-block;
}

fieldset {
  border: 1px solid #ddd !important;
  margin: 0;
  xmin-width: 0;
  padding: 10px;
  position: relative;
  border-radius: 4px;
  background-color: #f5f5f5;
  padding-left: 10px!important;
}

legend {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0px;
  width: 35%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 5px 5px 10px;
  background-color: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="controls">
  <div class="entry">
    <div class="form-group">
      <select id="brand" name="brand" class="selectpicker" data-width="100%" data-none-selected-text="Nothing selected" data-live-search="true" tabindex="-98">
				<option value=""></option>
				<option value="1">Alcatel</option>
				<option value="2">Samsung</option>
				<option value="3">Nokia</option>
				<option value="4">Apple</option>
				<option value="5">LG</option>
				<option value="6">Sony</option>
				<option value="7">Huawei</option>
				<option value="8">Oppo</option>
				<option value="9">WIKO</option>
				<option value="10">ACCENT</option>
			</select>
      <span class="input-group-btn">
				<button class="btn btn-success btn-add" type="button">
					<span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
    <div class="form-group">
      <fieldset class="">
        <legend class="test"></legend>
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#contact_01" data-toggle="tab">Samsung A3</a><span>x</span>
          </li>
          <li><a href="#contact_02" data-toggle="tab">Samsung A4</a> <span> x </span>
          </li>
          <li><a href="#" class="add-contact">+ Add product</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
          <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
        </div>
      </fieldset>
    </div>
  </div>
</div>

＆＃13;

如何设置动态添加的每个字段集的名称

1 个答案: