按選項值訂購商品

Question

我已經得到了下面的代碼，代碼沒問題，唯一的問題是，如果我按順序做了錯誤的事情，我想糾正它，整個文本被清除並開始從開始：

function getValues() { 
var result = []; 
var me = this; 
$('select').each(function (idx, el) { 
    var $el = $(el); 
    result[3*$el.val()+idx]=($el.next('input[type="hidden"]').val() + ' ' + $el.val()); 
    if (me === el) return false; 
}); 
console.log(result); 
$('#res').html(result.join(' ')); 
} 

$('select.startID,input[type="hidden"]').change(getValues); 


<select name="startID[]" class="startID"> 
<option value="0">SELECT</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 
<input type="hidden" name="startText[]" value="Text1"> 
Text1 
<br /> 

<select name="startID[]" class="startID"> 
<option value="0">SELECT</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 
<input type="hidden" name="startText[]" value="Text2"> 
Text2 

<br /> 

<select name="startID[]" class="startID"> 
<option value="0">SELECT</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 
<input type="hidden" name="startText[]" value="Text3"> 
Text3 
<div id="res"></div> 

DEMO：http://jsfiddle.net/aburayane/zwzx7ann/

所以在選擇框前面的文本是在隱藏的輸入一樣，我應該從選擇框，對應於文字前面相同的值，例如1 => Text1,2 => Text2,3 => Text3，如果錯誤地選擇了1 => Text2,2 => Text1和3 => Text3，所以我的錯誤出現在Text1和Text2中，我沒有選擇正確的值，如果我想糾正，整個文本被刪除並從頭開始。

我的問題：有沒有什麼方法可以在不刪除數據的情況下對打印的文本進行更正，它應該交換在一起。

在此先感謝

Answer 1

有什麼奇怪在這裏，因爲你已經mentionned你getValues功能打破曾經在each迴路電流select元素是一個主題有能力改變：

if (me === eq) return false; 

所以一旦你爲所有三個select元素選擇了一些值，例如你回到第一個元素，迭代將改變第一個元素，並檢查它是否是一個可能發生改變的事件和return false這將會絕對地阻止後續迭代，因此以下select元素選擇將不會顯示，即使他們已經選擇過。

你需要的是一個簡單的function的是，不要只檢查，如果目前的select是被改變的人，而且要檢查下一個項目已經存在於結果字符串。這可以通過檢查，如果後者的值已經在RES HTML字符串簡單地完成，條件，那麼可能會像這樣：

if ((me === el) && !nextItemWasAlreadyShown(idx + 1)) 
    return false; //Check if next element (idx + 1) of the current select was already in the res string 

凡nextItemWasAlreadyShown函數聲明如下所示：

function nextItemWasAlreadyShown(index) { 
    var continueLoop = false; 
    var resText = $('#res').html(); 
    var text = $('select').eq(index).next('input[type="hidden"]').val(); 
    if (resText.indexOf(text) > -1) 
    continueLoop = true; 
    return continueLoop; 
} 

完整演示可以在JSFiddle的修改版本中找到。