在不同的行显示多选选项答案

【问题标题】：displaying Multiple select option in diiferent line在不同的行显示多选选项
【发布时间】：2015-06-07 10:07:06
【问题描述】：

我有一个在 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>

我们将非常感谢您的帮助。

谢谢

【问题讨论】：

感谢您的回复，我认为您的代码确实回答了我的问题，但我可以让每个水果都转到不同的链接，例如：orange - orange.html，banana - 香蕉。 html。而不是链接到相同的网址

标签： javascript jquery html css

【解决方案1】：

您可以遍历项目并显示它们，附加锚点 (<a />) 并使用 <br /> 换行。

确保在.append() 其他项目之前添加.empty() 以清除列表中的水果$('#yourfruit')，如下例所示。

var fruits = $(this).val();
$('#yourfruit').empty();
for (var fruit in fruits) {
   var label = $('<label/> ').text(fruits[fruit]+" - ");
   $('#yourfruit').append(label)
                   .append($('<a  class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
                  .append('<br />');
}

$(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 */
    var fruits = $(this).val();
    $('#yourfruit').empty();
    for (var fruit in fruits) {
        var label = $('<label/> ').text(fruits[fruit] + " - ");
        $('#yourfruit').append(label)
                       .append($('<a  class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
                       .append('<br />');
    }

  });
});

.tab-btn {
  color: red;
}
.tab-btn:hover {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>

【讨论】：

感谢您的回复，我认为您的代码确实回答了我的问题，但我可以让每个水果都转到不同的链接，例如：orange - orange.html，banana - 香蕉。 html。而不是链接到相同的网址
您好，我是 jquery 的新手，我正在尝试设置在选择一个或多个选项后显示的结果的样式，但不适用于选项框中的所有结果显示，见下文。 $('#yourfruit').append(label) .append($('').text(fruits[fruit]).attr('href', fruits[fruit] + '.html')) .append('
'); }
@JideIgun 查看我更新的 snnipet，这是您尝试实现的目标吗？您向我展示的代码似乎有效。
是的，代码确实部分工作，我应用的 css 代码没有全部工作，请参阅下面的 css。 .tab-btn{ 宽度：100%;边距底部：4px；列表样式类型：无；高度：30px；行高：30px；填充：10px 25px；文本对齐：居中；颜色：#B4008C；背景颜色：#C8C8C8;}

【解决方案2】：

您可以根据需要添加HTML 标签，例如<a> 或</br>

$(document).ready(function () {
    $('#select-custom-19').change(function () {
        $('#yourfruit').text("");
        if($(this).val() != null)
        {
           $(this).val().forEach(function (value, index) {
               $('#yourfruit').append("<a href='#'>" + value + "</a></br>");
           });
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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>

【讨论】：

【解决方案3】：

您可以尝试在每个选定选项后添加<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

【讨论】：

【解决方案4】：

下面试试

<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; ">
  <ul id="yourfruit">
  </ul>
</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').append('<li>'+$(this).val()+'</li>');
            }
              );
                 });
    </script>

【讨论】：