javascript - 在不同行中显示多选选项

Question

我有一个多选选项，在 div 容器中显示结果，当单击 ctrl+"orange""apple""banana"结果显示:"orange, apple, banana"在一行中，但我想在一个新的单行中显示每个结果，并带有一个指向不同页面的链接，如下所示:

橙色 - “转到链接”
Apple - “转到链接”
Banana - “转到链接”

下面是我的代码:

<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript">

</script>
<select name="" multiple="multiple" id="select-custom-19">    
    <option>Add Fruits</option>        
    <option value="orange" selected>orange</option> 
    <option value="apple">apple</option>
    <option value="banana">banana</option>             </select>
<div style="width:300px; height:70px; background-color:#E1D903; 
        color:#000000; margin: 10px; "> <span id="yourfruit"> </span>

</div>
<script type="text/javascript">
    $(document).ready(function() {

        $('#select-custom-19').change(function() {
            /* setting currently changed option value to option variable */
            var option = $(this).find('option:selected').val();
            /* setting input box value to selected option value */
            $('#yourfruit').text($(this).val());
        });
    });
</script>

非常感谢您的帮助。

谢谢

Answer 1

您可以尝试添加 <br/>每个选定选项后的元素。我用过<label>元素，但您可以添加链接或您想要的任何其他元素

$(document).ready( function ()
     {
     $('#select-custom-19').change(function(){

        $('#yourfruit').empty();

        var values = $(this).val();

        for(var i=0; i < values.length ; i++)
        {
          $('#yourfruit').append('<lable>'+values[i]+'</label><br/>');
        }   
      });
 });

JSFiddle Demo