Question

我有一条select语句，可以一次选择一个值，我试图创建一个用于多选的复选框。我的下拉列表值来自后端。我不能使用任何引导插件。下面是代码，无论如何，只要稍加修改即可实现此目的。任何帮助将不胜感激。

 int main() {
    pid_t pid;
    int fd[2];

    int stdOut = dup(1);

    pid = fork();
    if (pid == 0) {
        pipe(fd);
        pid = fork();
        if (pid == 0) {
            close(fd[0]);
            dup2(fd[1], STDOUT_FILENO);
            close(fd[1]);

            write(stdOut, "a\n", 2);

            execlp("cat", "cat", "/etc/passwd", NULL);
        }
        close(fd[1]);
        dup2(fd[0], STDIN_FILENO);
        close(fd[0]);

        write(stdOut, "b\n", 2);

        execlp("wc", "wc", "-l", NULL);
    }
    wait(NULL);
    return 0;
}

 
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);

Answer 1

这是在下拉菜单中包含复选框的代码段。

.multipleSelect {
  width: 130px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: auto;
}

.selectionBox {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#multipleCheckbox {
  display: none;
  border: 1px solid;
}

#multipleCheckbox label {
  display: block;
}

#multipleCheckbox label:hover {
  background-color: #42ecf5;
}

<div class="multipleSelect">
  <div class="selectBox" onclick="showMultipleCheckbox()">
    <select>
      <option>Select a checkbox</option>
    </select>
    <div class="selectionBox"></div>
  </div>
  <div id="multipleCheckbox">
    <label for="one">
        <input type="checkbox" id="one" />Check box1</label>
    <label for="two">
        <input type="checkbox" id="two" />Check box2</label>
    <label for="three">
        <input type="checkbox" id="three" />Check box3</label>
  </div>
</div>

<script>
  var selectTagOpen = false;

  function showMultipleCheckbox() {
    var checkboxes = document.getElementById("multipleCheckbox");
    if (!selectTagOpen) {
      checkboxes.style.display = "block";
      selectTagOpen = true;
    } else {
      checkboxes.style.display = "none";
      selectTagOpen = false;
    }
  }
</script>

Answer 2

尝试一下将您从后端获得的那些详细信息放入一个数组（如关联数组）中，然后将其传递给前端。然后在前端访问数组元素。例如：“>

Answer 3

尝试将您的选择更改为此：<select id="student" multiple> 然后，您应该可以按住ctrl按钮并选择多个值

Answer 4

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

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;
}

创建多选复选框

4 个答案: