使用Multple = On显示下拉列表中的选定值

I'm trying to display ALL selected values in a drop down list. The code shown below works to display only the first value however I'm struggling on understanding how to get it to display each value that is selected.

我正在尝试在下拉列表中显示所有选定的值。下面显示的代码仅用于显示第一个值,但我正在努力了解如何使其显示所选的每个值。

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/

2 个解决方案

#1

Why not use jQuery when you can?

为什么不尽可能使用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>

#2

Here you go: https://jsfiddle.net/2gq824q2/15/

你去吧:https://jsfiddle.net/2gq824q2/15/

function myFunction() {
    var sSelected = '';
    [].forEach.call(  document.querySelectorAll('#Car :checked')  , function(elm){
       	if(sSelected !== '') sSelected += ', ';
    	 sSelected += elm.value;
		})
    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>

I updated the function, and note the select now has an ID.

我更新了这个功能,并注意select现在有一个ID。

#1