jquery，js,html前端select标签option标签可以不用单选，可以复选

在HTML中，<select> 标签默认是单选的，每次只能选择一个<option>。如果你想让<select> 标签的<option> 能够实现复选，即可以选择多个选项，你需要使用一些额外的JavaScript库，如multi-select。

以下是一个使用jQuery和multi-select库实现复选的例子：

首先，在HTML中添加<select>标签：




<select id="mySelect" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

接下来，引入jQuery和multi-select库：




<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>

最后，使用jQuery初始化multi-select：




$(function() {
  $('#mySelect').multiSelect();
});

完整的HTML示例代码如下：




<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
</head>
<body>
 
<select id="mySelect" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>
 
<script>
  $(function() {
    $('#mySelect').multiSelect();
  });
</script>
 
</body>
</html>

当你运行这段代码时，你会看到一个可以选择多个选项的下拉菜单。

jquery，js,html前端select标签option标签可以不用单选，可以复选

评论已关闭

推荐阅读