Multple = Onのドロップダウンリストで選択した値を表示

Question

ALLの値をドロップダウンリストに表示しようとしています。下に示すコードは、最初の値だけを表示するように動作しますが、私はの各の値を表示する方法を理解するのに苦労しています。ここで

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を持っている今の選択に注意してください。