1

選択オプション、リスト、ボタンがあります。ボタンをクリックすると、選択したオプションが削除され、リストに追加されます。また、リスト内の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();
            });

それは機能しますが、3つのオプションを追加すると、3つのオプションが削除され、選択に戻されます（ここで問題がない場合）。もう一度追加すると、1つだけではなく、選択のすべてのオプションが削除されます。選択されました。私はどこで間違いを犯したのか、jqueryに非常に慣れていないのかについての手がかりがないので、これを尋ねなければなりませんでした。どんな助けでも本当にありがたいです。ありがとう。

4

1 に答える 1

1

足りないものがいくつかあります。

  • 2番目のコールバックはjqueryreadyコールバックの外にあります
  • 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();
        });                 
        });
于 2012-09-17T07:23:07.073 に答える