獲取有關變化

最後的標籤數據我有這樣的代碼：獲取有關變化

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

獲取有關變化

回答

相關問題