jQuery：如何阻止选择列表重置？

Question

每当触发“添加”按钮时，我都会在“li”列表（包含另一组选择列表）的前面添加一个选择列表。

我会有这个......

<li><select name="selectbox1><!--OptionsList--></select><select name="selectbox2">
<!--OptionsList--></select></li>

最终我希望在触发“添加”按钮后实现此目的：

<li><select name="newselectbox"></select><select name="selectbox1><!--OptionsList--></select><select name="selectbox2">
<!--OptionsList--></select></li>

我尝试过使用这种方法来修改'li'的内容。

$("ul.criteriallist li:eq(0)").html("<select name='cao1' class='cao ops'></select>" +    
$("ul.criteriallist li:eq(0)").html());  

我发现它有效，但如果在已经制作的选择框中有选择，则选择将被“擦除”干净。我想这是因为我使用了 .html（）方法，它只获取代码而不是选择框的当前状态。如何阻止选择列表重置？

JSFiddle：http://jsfiddle.net/kosherjellyfish/2NKUb/

Answer 1

变化：

$("ul.criteriallist li:eq(0)").html("<select name='cao1' class='cao ops'></select>" + $("ul.criteriallist li:eq(0)").html());  

为：

$("ul.criteriallist li:eq(0)").prepend("<select name='cao1' class='cao ops'></select>");

<强> jsFiddle example

Answer 2

在添加新的select代码之前，将 value 的selectlist1存储在

等变量中

var d = $("ul.criteriallist li").find('select').val();

然后，一旦设置了html，请将值设置回

$("ul.criteriallist li").find('select').val(d);

JSFiddle