根据下拉选择添加新列表行

Question

我正在尝试以下方法。

我有一个功能，根据下拉选项显示隐藏列表。

请访问此处查看：

http://jsfiddle.net/vSyK6/28/

我要做的是当选择Option1时，它将显示＃List-Option1内容的内容，如果选择了Option2，它将显示内容＃List-Option2。

现在，我想要完成的是当两个内容都显示出来时，如果再次选择选项，它应该添加另一个选择了该选项的列表。

基本上，如果我们遵循这个顺序：

选项1 ....然后
选项2 ....然后

我们再次选择Option1，它应该显示为

选项1内容
选项2内容
选项1内容

如果我们再次选择Option2，它应该显示如下：

选项1内容
选项2内容
选项1内容
选项2内容

现在它的作用是在列表的最后一行显示所选项目。它不会添加新的列表行。这个功能当然没有实现。我需要解决方案： - ）

希望我有意义:)）

感谢任何帮助

Answer 1

我建议如下：

$('#List-Option1, #List-Option2').hide();

$('#category').change(function() {
    var str = $('#category').val();
    $('#List-' + str).clone(true, true).attr('id', function(i,v){
        return v.replace(/\d+/,'') + (parseInt($('#box li[id^="List-Option"]').length,10) + 1);
    }).appendTo('#box ul').show();
});​

JS Fiddle demo

参考文献：

• attr()。
• attribute-starts-with (attribute^="value"]) selector。
• clone()。
• parseInt()。
• string.replace()。

Answer 2

更新了jsfiddle。我正在使用jQuery clone来创建新的选项内容。注意如果要多次重复相同的代码，请不要使用id。