how to display dropdown selected options in separate lines

Question

Is there a way to display dropdown selected options in separate lines? (I have a basket in my form where shows selected movies by users.. but the problem is that if user selects more than one option, they are not shown in separate lines)

For example, with the code below, if I select "Toy story" and "Forest gump", then selectedOpts will be ="Toy storyForest gump" while I need "Toy story", "Forest gump" in separate lines.

$('#btnRight').on('click', function (e) {
         var selectedOpts = $("#movieName option:selected").text();
         if (selectedOpts.length == 0) {
               alert("NOTHING TO MOVE");
               e.preventDefault();
         }else {
               var obj = {
                     "movie_name":selectedOpts,
                     "movie_info": ""
                };
               alert(selectedOpts);
               parent.window.opener.addToBasket(obj);
          }
      $("#tags").val("");
    });

and this is how I see selected movies in the basket:

enter image description here

Posting your HTML (see: "[MCVE](http://stackoverflow.com/help/mcve/)"), and using a stack snippet (click on the '[edit]' link, and then the button over the textarea with a pencil (beside the image icon) to do so) or a [JS Fiddle](http://jsfiddle.net/), or similar, would be helpful in getting answers. — David Thomas, Nov 19 '14 at 22:07

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Simple answer: you can't do it using standard html select tag.

But you can create custom dropdown element from div or span elements or even use ready solution

Also look this Can you have multiple lines in an <option> element?

edited May 23 '17 at 12:05

Community

1
1

answered Nov 07 '14 at 12:12

Panoptik

1,094
1
16
23

Thanks, but I think this is not my case.. I didn't ask to show one option in multiple lines.. I just want to get each options in a separate line... – mOna Nov 07 '14 at 13:12
@mOna so maybe you need to set attribute multiple to dropdown list and you can select many items simultaneously. But in this way you don't have drop down. This select tag will be just a list – Panoptik Nov 10 '14 at 07:42

score 0 · Answer 2 · answered Nov 19 '14 at 21:56

may be i understand..: your select#movieName has already multiple attribute.

see http://jsfiddle.net/243p5fzd/ for detail

var lines = [];
$("#movieName option:selected").each(function(){
    lines.push($(this).text())
});
alert(lines)

is this what you search?

how to display dropdown selected options in separate lines

2 Answers2