仅在javascript中单击时显示选项下拉列表

我的代码如下所示

<label>Dropdown :</label>
<select multiple="multiple" id="dropdown">
<option selected="selected" value="">Please Select</option>
    <option id="1">Opt 1  </option>
    <option id="2">Opt 2  </option>
    <option id="3">Opt 3  </option>
    <option id="4">Opt 4  </option>
</select>

查看一个样本

这将生成一个下拉列表已展开的输出。但我希望下拉列表仅在单击时展开，允许选择多个选项，并在下拉列表中使用逗号分隔的值显示所有选定的值

怎么做

$（“选项”）.mousedown（函数（e）{
e、 预防默认值（）；
$（this.prop（'selected'），$（this.prop（'selected'）？false:true）；
var值=$（“#下拉列表”）.val（）；
警报（数值）；
返回false；
});

下拉列表：
请选择
选择1
选择2
选择3
选择4
我建议使用插件。在这种情况下非常有用，并且高度可配置


$（'select'）。选择2({
占位符：“选择一个选项”，
allowClear:对
});

下拉列表：
选择1
选择2
选择3
选择4
它可能满足您的要求。但是您需要链接这些库




$（文档）.ready（函数（）{
$（“#下拉列表”）.multiselect({
includeAlloption:true，
非选定文本：“请选择”，
selectAllText:“请选择”
});
});
下拉列表：
选择1
选择2
选择3
选择4
.多选容器*{
大纲：无！重要；
}
.multiselect container>li>a>label>input[type=checkbox]{
可见性：隐藏；
}
.multiselect container>li>a>标签{
填充物：5px；
}
您可以使用


$（函数（）{
$（“#下拉列表2”）。选择2({
“语言”：{
“noResults”：函数（）{
返回“请选择”；
}
}
});
$（“#下拉列表”）。选择2({
“语言”：{
“noResults”：函数（）{
返回“请选择”；
}
}
});
$（“#下拉菜单”）。在（“选择2:select”上，函数（e）{
var values=$（此值）。选择2（“val”）；
if（values.indexOf（“全部清除”）！=-1）
$（此）。选择2（“val”、“All”）；
其他的
警报（value.join（“，”）；
});
$（“#下拉菜单”）。在（“选择2：取消选择”上，函数（e）{
var values=$（此值）。选择2（“val”）；
if（值）警报（值.连接（“，”）；
})
$（“#下拉列表”）。关于（“更改”，函数（e）{
var values=$（此值）。选择2（“val”）；
if（values）console.log（“使用更改事件：”，values.join（“，”））；
})
});
#下拉列表，#下拉列表2{
宽度：100%；
}

下拉列表：
清除所有
选择1
选择2
选择3
选择4



没有数据的下拉列表
：
您可以使用引导mutiselect js。这里我不想显示复选框和全选选项，选择“请选择”时，必须清除以前选择的其他选项。您可以使用CSS隐藏单选框。代码根据您的要求进行更新。如果我选择“请选择”，则第一次单击时会选中所有选项，第二次单击时会取消选中所有选项。我想用逗号显示选择的所有值，但在这里选择三个选项后，它会显示选择的选项数。可以通过增加限制在javascript中更改。但是这会使选择框溢出。我想我使用的是bootstrap v3.2，所以它给了我未捕获的TypeError:$（…）。live不是一个函数。您在代码中的jquery之后添加了select2.js和select2.css吗？是的，我使用过，但错误显示在这里$（“#下拉”）。live（“更改”，function（）{}。因为这里一旦更改，我需要应用逻辑。请按照我的回答：使用
.on（“select2:select”）
事件或
.on（“change”）
事件，并使用
$（this）获取值。选择2（“val”）如果单击时没有数据，则未找到任何结果。取而代之的是，我需要隐藏这个或重命名以请选择
$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var values = $('#dropdown').val();
    alert(values);
    return false;
});