获取有关更改的最后标签数据

Question

我有这个代码：

var i = 0;
$('#jobs').change(function() {
  var id = $(this).select2('data')[i].id;
  var txt = $(this).select2('data')[i].text;
  $('#jobSection').append('<fieldset><legend>' + txt + '</legend><input type="text" class="form-control" name="size_' + id + '" placeholder="Size"><br/><select class="form-control" name="type_' + id + '"><option>Type</option><option value="1">Type 1</option><option value="2">Type 2</option></select></fieldset>');
  i++
});

为此，我为每个标签附加了额外的输入字段。

但只有当我按顺序 select 标记时它才有效，否则它需要以前的标记数据。

我知道问题出在 i 因为这不是实际循环而是更改事件。
所以我想知道如何获取更改时的最后一个标签数据？

完整的例子是here

Answer 1

我认为您应该重新设计您的应用程序以在每次根据当前选择的元素更改选择时重建整个#jobSelection 节点。这样你的#jobSelection 结构总是被实现。

我查看了事件对象，但没有找到有关上次选择的选项的信息。因此，您需要使用当前状态而不是更改。

如果这不是选项，您始终可以将先前的选择状态保留在某个变量中，并在每个 onChange 事件中将其与当前状态进行比较。但我认为这不是您问题的最佳解决方案。

Answer 2

var selectOption = [{
   "id": 1,
   "text": "one"
 }, {
   "id": 2,
   "text": "two"
 }, {
   "id": 3,
   "text": "three"
 }, {
   "id": 4,
   "text": "four"
 }, {
   "id": 5,
   "text": "five"
 }];
 $('#jobs').select2({
   tags: true,
   multiple: true,
   placeholder: 'Choose job...',
   data: selectOption
 });

 var selectOptionObj = {};
 $.each(selectOption, function(i, v) {
   selectOptionObj[v.id] = v;
 });

 $('#jobs').change(function() {
   var thisVal = $(this)[0].value.split(',');
   var i = thisVal[thisVal.length - 1];
   var id = selectOptionObj[i].id;
   var txt = selectOptionObj[i].text;
   $('#jobSection').append('<fieldset><legend>' + txt + '</legend><input type="text" class="form-control" name="size_' + id + '" placeholder="Size"><br/><select class="form-control" name="type_' + id + '"><option>Type</option><option value="1">Type 1</option><option value="2">Type 2</option></select></fieldset>');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<div id="jobSection">
  <input type="text" id="jobs">
</div>

Refer : JSFiddle

获取有关更改的最后标签数据

Get last tag data on change

javascript

jquery

jquery-select2