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

时间:2014-03-19 10:34:22

标签: javascript

首先,我对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;

3 个答案:

答案 0 :(得分:4)

尝试在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>

选择多个选项的基本思路

答案 1 :(得分: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>

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

enter image description here

答案 2 :(得分:2)

为什么你不能使用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());
    });
})

希望这个帮助