javascript - 创建多选复选框

Question

我有一个 select 语句，我可以一次选择一个值，我正在尝试创建一个多选复选框。我的下拉值来自后端。我不能使用任何 Bootstrap 插件。下面是代码，是否可以通过对代码进行少量修改来实现这一点。任何帮助将不胜感激。

 
function selectMultiple(studentList) {
  for (var i = 0; i < studentList.length; i++) {
    let studentVal = studentList[i];
    $("#student").append('<option value="' + studentVal + '">' + studentVal + '</option>');
  }
}

//studentlist coming from backend
var studentList = ['A', 'B', 'C'];

selectMultiple(studentList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="test">
      <select id="student">
        <option selected="selected" value="default">select here</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

您可以简单地使用 <ul>标记并修改您的 css，使其看起来像 drop-down列表，也在下面的代码中我使用了 .one("click",function()..这样就不会有多个append .

$("#s1").one("click",function(){

  for (var i = 0; i < studentList.length; i++) {
    let studentVal = studentList[i];
    $("#student").append('<li value="' + studentVal + '">' +'<input type="checkbox">'+ studentVal + '</li>');
  }

});



//studentlist coming from backend
var studentList = ['A', 'B', 'C'];

ul li:hover, ul li:focus {
 color:red;
}

li{
list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="test">
      <ul id="student">
        <li id="s1" selected="selected" value="default">Select here</li>
      </ul>
    </td>
  </tr>
</table>