DropDownList下拉菜单如何多选

Posted 2023-03-28

求DropDownCheckList代码，可用

参考技术A 用js将多次的选定值拼接起来 !
代码如下：
<script type="text/javascript">
var txt="";
function resetsrc(id)

if(id>0)

var obj=document.getElementById("DropDownList1");
for(i=0; i<obj.length;i++)

if(obj[i].value==id)

var newtxt=obj[i].text;
if(txt.indexOf(newtxt)>=0)

alert("“"+newtxt+"” 已经选择过了！");

else

txt+=newtxt+",";



document.getElementById("span").innerhtml="你的选择："+txt;


</script>
<select name="DropDownList1" id="DropDownList1" onchange="resetsrc(this.value)">
<option selected="selected" value="0">--选择期数--</option>
<option value="1">2010年第一期</option>
<option value="2">2010年第二期</option>
<option value="3">2009年第三期</option>
<option value="4">2009年第一期</option>
<option value="5">2009年第二期</option>
<option value="7">2009年第四期</option>
<option value="8">2010年第三期</option>
</select>
<span id="span">你的选择：没有选择记录</span>

我这里用来显示选择结果的是一个span，你可以换成其它的标签，比如：文本框本回答被提问者采纳

如何制作不在 HTML 中的多选下拉菜单。它需要在良好的用户界面中

【中文标题】如何制作不在 HTML 中的多选下拉菜单。它需要在良好的用户界面中

【英文标题】：How can I make a multiselect dropdown not in HTML. It needs to be in good UI

【发布时间】：2019-03-02 02:06:27

【问题描述】：

我对编码很陌生， 我正在尝试制作一个好看的多选下拉菜单。

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

【问题讨论】：

您好，欢迎来到 Stack Overflow！您能否更详细地解释您的问题。现在还不清楚你在问什么。谢谢你，祝你好运！

这能回答你的问题吗？ Bootstrap 4 multiselect dropdown

【参考方案1】：

您可以通过多种方式做到这一点，其中一种是使用语义 ui。添加这个脚本文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<script>
$('.ui.fluid.dropdown')
.dropdown(
maxSelections: 5
) 
</script>

 <select  class="ui fluid dropdown">
            <option value="">Skills</option>
 </select>

为了更好地理解，请通过这个例子Bootstrap multiselect is not working when i bind the data from response in Angularjs

如果您想在 Bootstrap4 中使用，请查看此Bootstrap 4 multiselect dropdown