获取有关变化

最后的标签数据我有这样的代码：获取有关变化

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++ 
});

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

但是，它只有在我按顺序选择标签时才起作用，否则它需要先前的标签数据。

我知道问题在i，因为这不是实际的循环，而是改变事件。
所以我想知道如何才能得到最后的标签数据的变化？

完整的例子就是here

来源

2016-06-23 Space Peasant

查看文档，这应该不会是在'select'？ – wmash

我不知道jquery写你的代码。但我可以指出这个问题。您的数据$（this）.select2（'data'）由数据填写。这意味着当你选择标签3,4,1时 - 你的数据实际上是1,3,4。此时你的“我”是2（增加0-> 1-> 2，最后是3），而你从数据中获得了价值4，而你上次点击了1。所以我不断增加，但你总是会得到最大的标签。 UPD：是的，这段代码需要重新设计。正如GrigTheFirst在他的回答中提到的那样。 –

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>

参见：JSFiddle

来源

2016-06-23 12:35:25 zakhefron

只是关于这个解决方案的一个注释，它只适用于id从1开始的顺序。如果有一些数字丢失，那么它会失败。 –

只需检查更新的JsFiddle [链接]（https://jsfiddle.net/3urpdsn6/1/） – zakhefron

我想你应该重新设计应用程序来重建整个#jobSelection节点每次选择根据当前选定的元素改变。这样你的#jobSelection结构总是被实现。

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

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

来源

2016-06-23 12:02:43 GrigTheFirst

获取有关变化

回答

相关问题