jquery - 将选择选项中的项目添加到列表中，然后将它们放回去

Question

我有一个选择选项、一个列表和一个按钮。单击按钮时，它会删除选定的选项并将其放入列表中。并且当单击列表中的 li 时，它会被放回选择选项中并自行删除。这是我的代码：

                            <select id="selLanguage" >
                                 <option value="1">English</option>
                                 <option value="2">Spanish</option>
                                 <option value="3">German</option>
                            </select>

                             <ul id="ulLanguage">
                             </ul>

                             <button id="btnAddLanguage">Language</button>

---

            //ADD LANGUAGE
            $(function() {
                $("#btnAddLanguage")
                .button()
                .click(function() {

                    $("#ulLanguage").append("<li id='"+$("#selLanguage :selected").val()+"' onclick='remove(this);' style='cursor:pointer'>"+$("#selLanguage :selected").text() +" </li>");
                    $("#selLanguage option[value='"+$("#selLanguage :selected").val()+"']").remove();


                });
            });
            //REMOVE LANGUAGE
            $("#ulLanguage").on("click","li", function(){

                $("select#selLanguage").append("<option value='"+$(this).val()+"' >"+$(this).text()+"</li>");
                $(this).remove();
            });   

它可以工作，但是当我添加三个选项时，我删除了三个选项并将它们放回选择中（直到这里没问题），然后我再次添加一个，它删除了选择中的所有选项，而只是一个选择。我不知道我在哪里犯了错误，而且我对 jquery 很陌生，所以我不得不问这个。任何帮助将非常感激。谢谢。

Answer 1

有几样东西不见了：

• 您的第二个回调在 jquery 就绪回调之外
• 您注入回选择一个作为 li 关闭的选项：

append("< option value='"+$(this).val()+"' >"+$(this).text()+"</ li >");

• 当您将项目放回选择中时，您不会保留 li.id 值，因此会出现错误。

修正版如下

        $(function() {
            $("#btnAddLanguage")
            .on('click', function() {

                $("#ulLanguage").append("<li id='"+$("#selLanguage :selected").val()+"' style='cursor:pointer'>"+$("#selLanguage :selected").text() +" </li>");
                console.log($("#selLanguage :selected").val());
                $("#selLanguage option[value='"+$("#selLanguage :selected").val()+"']").remove();


            });

        //REMOVE LANGUAGE
        $("#ulLanguage").on("click","li", function(){

            $("select#selLanguage").append("<option value='"+$(this).attr('id')+"' >"+$(this).text()+"</option>");
            $(this).remove();
        });                 
        });