Question

I have a select option, a list and a button. When the button is clicked it removes the selected option and put it in the list. And when the li in the list is clicked, it is put back in the select option and it removes itself. Here is my code:

                            <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();
            });   

It works, but when i add the three options, i remove the three optiones and they are put back in the select (till here is ok), and i add one again and it removes all the options in the select, instead just the one selected. I dont have any clue about where i made my mistake and Im very new to jquery, so i had to ask this. Any help would be really appreciated. Thanks.

Answer 1

There are several things missing:

• Your second callback is outside the jquery ready callback
• You inject back into the select an option which is closed as a li:

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

• You don’t preserve the li.id value when you put back the item in the select, thus the error.

A corrected version is below

        $(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();
        });                 
        });