下拉列表允许选择多个选项

Question

我正在尝试弄清楚如何使用HTML5创建一个将从数据库中填充的下拉列表，但它将显示如下图所示。我试图能够选择几个位置或者有一个选择多个位置的按钮或者删除所有位置（如果有的话），同时在另一个下拉列表或文本区域显示客户所选择的方法也可以删除单个项目。您是否必须使用Javascript才能使这些功能正常工作，或者是否可以使用HTML5进行此操作？

<form name="generatereport" method="post" action="?_location_queries.cfm">

<select name="Location" id="loc" multiple="multiple">
    <!---<option selected value="">Select location</option>--->
    <option value="OPERATIONS">Operations</option>
    <option value="CCC">Contact Center</option>
    <option value="QA">QA Department</option>
    <option value="DS">DeSoto</option>
    <option value="PS">Palma Sola</option>
    <option value="LWR">Lakewood Ranch</option>
    <option value="NR">North River</option>
    <option value="SDL">SDL</option>
</select>

<button id="add">ADD ALL</button>
<button id="rem">REMOVE ALL</button>
<br /><br />

<input type="submit"  name="submit" value="Continue" />

</form> 

<script type="text/javascript">
var opts = document.querySelectorAll('#loc option');

document.getElementById('add').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = true;
    }
});

document.getElementById('rem').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = false;
    }
}); 
</script>

https://jsfiddle.net/m26kru2w/

Answer 1

在这里，你来自@ adeneo的例子：

var opts = document.querySelectorAll('#loc option');

document.getElementById('add').addEventListener('click', function() {
	for ( var i=0; i<opts.length; i++ ) {
    	opts[i].selected = true;
    }
    
    reflectChange();
});

document.getElementById('rem').addEventListener('click', function() {
	for ( var i=0; i<opts.length; i++ ) {
    	opts[i].selected = false;
    }
    
    reflectChange();
});

document.getElementById('loc').addEventListener('change', reflectChange);

function reflectChange() {
	document.getElementById('selected').value = '';
  
	for ( var i=0; i<opts.length; i++ ) {
    	if(opts[i].selected)
      	document.getElementById('selected').value += opts[i].text+'\n';
    }
}

<select name="Location" id="loc" multiple="multiple">
    <option value="all">All Departments</option>
    <option value="OPERATIONS">Operations</option>
    <option value="CCC">Contact Center</option>
    <option value="QA">QA Department</option>
    <option value="DS">DeSoto</option>
    <option value="PS">Palma Sola</option>
    <option value="LWR">Lakewood Ranch</option>
    <option value="NR">North River</option>
    <option value="SDL">SDL</option>
</select>

<button id="add">ADD ALL</button>
<button id="rem">REMOVE ALL</button>

<textarea id="selected"></textarea>