在Multple = On的下拉列表中顯示選定值

Question

我試圖在下拉列表中顯示所有選定的值。下面顯示的代碼僅用於顯示第一個值，但我很難理解如何使其顯示，每個值都是選定的。

function myFunction() { 
var x = document.getElementsByName("Car").item(0).value; 
document.getElementById("demo").innerHTML = "You selected: " + x; 
} 

<p>Select a new car from the list.</p> 
<select name="Car" multiple="on" size="5" onchange="myFunction()"> 
<option value="Audi">Audi 
<option value="BMW">BMW 
<option value="Mercedes">Mercedes 
<option value="Volvo">Volvo 
</select> 
<br> 
The car is: 
<p id="demo"></p> 

https://jsfiddle.net/2gq824q2/12/

Answer 1

爲什麼不使用jQuery？

function myFunction() { 
 
    var x = $('#car').val() 
 
    $('#demo').html("You selected: " + x.join(", ")) 
 
} 
 
$('#car').change(function() { 
 
    myFunction(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Select a new car from the list.</p> 
 

 
<select id="car" name="Car" multiple="on" size="5"> 
 
    <option value="Audi">Audi 
 
    <option value="BMW">BMW 
 
    <option value="Mercedes">Mercedes 
 
    <option value="Volvo">Volvo 
 
</select> 
 
<br> 
 
The car is: 
 
<p id="demo"></p>

Answer 2

在這裏你去：https://jsfiddle.net/2gq824q2/15/

function myFunction() { 
 
    var sSelected = ''; 
 
    [].forEach.call( document.querySelectorAll('#Car :checked') , function(elm){ 
 
     \t if(sSelected !== '') sSelected += ', '; 
 
    \t sSelected += elm.value; 
 
\t \t }) 
 
    document.getElementById("demo").innerHTML = "You selected: " + sSelected; 
 
}

<p>Select a new car from the list.</p> 
 

 
<select id="Car" multiple="on" size="5" onchange="myFunction()"> 
 
    <option value="Audi">Audi 
 
    <option value="BMW">BMW 
 
    <option value="Mercedes">Mercedes 
 
    <option value="Volvo">Volvo 
 
</select> 
 
<br> 
 
The car is: 
 
<p id="demo"></p>

我更新的功能，並注意選擇現在有一個ID。