带有多个选定值的JavaScript下拉列表？

Question

首先，我对java脚本非常陌生。我在我的网络应用程序中进行开发，并且我有一个下拉菜单，其中包含人员列表。 使用它我知道如何传递一个人的选定值。但我怎样才能选择多个值（人名）并将数据发送到 后端实现。是否可以使用select标签？非常感谢你！

<select class="studentList" id="dropDown1">
    <option value="1">Joseph</option>
    <option value="2">Rick</option>
    <option value="3">john</option>
</select>

脚本代码

var drop = document.getElementById("dropDown1");
var selectedPerson = drop.options[drop.selectedIndex].text;

Answer 1

尝试在multiple代码中使用<select>属性。

尝试以下代码，

<强> HTML

<select class="studentList" id="dropDown1" multiple>
    <option value="1">Joseph</option>
    <option value="2">Rick</option>
    <option value="3">john</option>
</select>

<强> JS

$('#dropDown1').change(function () {
        alert($(this).val());
});

查看此 DEMO

注意：它将返回数组中的选定值。

<强>更新

如果您想将此视图更改为默认select，则jquery中有很多plug-ins可用。

但这是使用<select>

选择多个选项的基本思路

Answer 2

使用 HTML多重属性 http://www.w3schools.com/tags/att_select_multiple.asp。

但是如果你可以使用bootstrap到你的应用程序，这不是一项艰巨的任务。 Bootstrap 是一个很好的前端框架。

http://getbootstrap.com/

http://silviomoreto.github.io/bootstrap-select/项目提供多项选择功能的下拉列表。您需要做的是在课程中添加 selectpicker ，倍数< / strong>作为属性。

<select class="selectpicker studentList" id="dropDown1" multiple title='Choose one of the following...'>
      <option value="1">Joseph</option>
      <option value="2">Rick</option>
      <option value="3">john</option>
 </select>

请阅读文档并了解更多信息

Answer 3

为什么你不能使用jQuery，你可以很小的努力来获得这个选定的值。试试这个both way,

检查 Demo jsFiddle

HTML

<select name="select[]" class="studentList" multiple="multiple" id="dropDown1">
    <option value="1">Joseph</option>
    <option value="2" selected="selected">Rick</option>
    <option value="3" selected="selected">john</option>
</select>

JQuery的

arr = $("#dropDown1").val()
alert(arr);

---

检查 Demo jsFiddle

HTML

<select name="select[]" multiple="multiple" id="select">
    <option value="1">Joseph</option>
    <option value="2" selected="selected">Rick</option>
    <option value="3" selected="selected">john</option>
<input type="button" id="btn" value="click me" />

JQuery的

$('#btn').click(function(){
    $('#select option:selected').each(function(){
        alert($(this).text());
    });
})

希望这个帮助