关于select标签多选功能的select-2样式的清空选中项

程序员文章站 2024-03-18 13:49:16

...

今天说的就是select标签的多选功能的使用，使用select2组件完成多选。

下面是我们需要引入的文件JQuery最好大于等9，要不会有一些特效无法使用

<link rel="stylesheet" type="text/css" href="select2.min.css">
	<script type="text/javascript" src="jquery-11.3.min.js"></script>
	<script type="text/javascript" src="select2.min.js"></script>

下面就是我们的一个多选例子。

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
	<link rel="stylesheet" type="text/css" href="select2.min.css">
	<script type="text/javascript" src="jquery-11.3.min.js"></script>
	<script type="text/javascript" src="select2.min.js"></script>
	
  </head>
  
  <body>
    This is my HTML page. <br>
	
	<select multiple="multiple" id="userName_" name="userName" required="required" style="width:200px;display:block;margin:300px;"> 
		<option value="0" name="userName" >张三</option>
		<option value="1" name="userName" >李四</option>
		<option value="2" name="userName" >王五</option>
		<option value="3" name="userName" >陈柳</option>
		<option value="4" name="userName" >胡二</option>
		<option value="5" name="userName" >齐一</option>
		<option value="6" name="userName" >孙七</option>
		<option value="7" name="userName" >米八</option>
	</select>
  </body>
  <script>

$('#userName_').select2();


</script>
</html>