Move selected values ​​from textbox to dropdpwn

What I need: the user inserts the title of the movie into a text box, and as soon as he / she clicks on the "move to selected list" button, the title of the movie should be moved to the drop down list (which shows the titles of the movies the user has selected) and the text box should be cleaned up.

I searched a lot, but all I found was the opposite (insert the highlighted dropdown in the textbox!), Which is the opposite of what I needed).

This is what I tried but didn't work (it works for moving selected dropdown options to another dropdown menu, however it doesn't work for textbox:

<input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie titles here" />
<input type="button" value="Add to selected list" id="btnMove"/>
<select id="selectedItems" name="selectedItems[]" multiple="multiple" width="200px" size="10px">
</select> 



$('#btnMove').on('click', function (d) {
       var selected = $("#q").val();
       if (selected.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
       }
       $('#selectedItems').append($(selected));
       $(selected).remove();
       d.preventDefault();
   });   

      

Any help would be much appreciated :)

+3


source to share


1 answer


Try this using jquery.

$('#btnMove').click(function (e) {
       var selected = $("#q").val();
       if (selected.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
       } 
       else
            $("#selectedItems").append(new Option(selected));
}); 

      



Hope it works.

+3


source







All Articles