按选项值排序项目

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> 

演示：http://jsfiddle.net/aburayane/zwzx7ann/

所以选择框前面的文本在隐藏输入中是相同的，我应该从选择框中选择与前面文本对应的相同值，例如1 => Text1, 2 => Text2, 3 => Text3，如果我选错了1 => Text2, 2=> Text1 and 3=> Text3，所以我的错在Text1和Text2，我没有选择正确的值，如果我想更正，全文被删除并从头开始。

我的问题：有什么方法可以在不擦除数据的情况下对打印的文本进行更正，应该一起交换。

提前致谢

Answer 1

这里没有什么奇怪的，因为您已经向您提到了 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 的修改版本中找到。