Jquery 将“选择”选项中的项目添加到列表，然后将其放回

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

                            <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>

英语
西班牙的
德国的


语言

---

//添加语言
$（函数（）{
$（“btnAddLanguage”）
.按钮（）
。单击（函数（）{
$（“#ulLanguage”）.append（“
“+$（“#selLanguage:selected”）.text（）+“
”；
$（“#selLanguage选项[值='”+$（“#selLanguage:selected”）.val（）+“]”）。remove（）；
});
});
//删除语言
$（“#ulLanguage”）。在（“click”，“li”，function（）{
$（“选择#selLanguage”）.append（“+$（this）.text（）+””）；
$（this.remove（）；
});   

---

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

缺少几样东西：

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

追加（“+$（this）.text（）+”）

• 将项目放回select中时，不会保留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();
        });                 
        });

$（函数（）{
$（“btnAddLanguage”）
.on（'单击'，函数（））{
$（“#ulLanguage”）.append（“
”+$（“#selLanguage:selected”）.text（）+“
”；
console.log（$（“#selanguage:selected”）.val（）；
$（“#selLanguage选项[值='”+$（“#selLanguage:selected”）.val（）+“]”）。remove（）；
});
//删除语言
$（“#ulLanguage”）。在（“click”，“li”，function（）{
$（“选择#selLanguage”）.append（“+$（this.text（）+”）；
$（this.remove（）；
});                 
});

缺少几件事：

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

追加（“+$（this）.text（）+”）

• 将项目放回select中时，不会保留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();
        });                 
        });

$（函数（）{
$（“btnAddLanguage”）
.on（'单击'，函数（））{
$（“#ulLanguage”）.append（“
”+$（“#selLanguage:selected”）.text（）+“
”；
console.log（$（“#selanguage:selected”）.val（）；
$（“#selLanguage选项[值='”+$（“#selLanguage:selected”）.val（）+“]”）。remove（）；
});
//删除语言
$（“#ulLanguage”）。在（“click”，“li”，function（）{
$（“选择#selLanguage”）.append（“+$（this.text（）+”）；
$（this.remove（）；
});                 
});

使用on（）删除语言的任何特定原因？$（“#ulLanguage li”）。单击（function（）{…}）；应该是好的enough@user1565195是的，这是有原因的，我忘记了事件委派。正确的，很好的：）尝试用删除语言更改：

$（“select#selLanguage”）.append（“+$（this.text（）+”）

我认为，

$（this）.val（）

永远等于0。您使用on（）删除语言有什么特殊原因吗？$（“#ulLanguage li”）。单击（function（）{…}）；应该是好的enough@user1565195是的，这是有原因的，我忘记了事件委派。正确的，很好的：）尝试用删除语言更改：

$（“select#selLanguage”）.append（“+$（this.text（）+”）

我认为

$（this）.val（）

永远等于0。