Question

我很难正确调整选择选项框以处理我想要的操作。

我是CSS / HTML的新手，目前正在做一个项目，该目标基本上是一个网站，用于复制考试/学生在线考试的内容。

屏幕截图中当前添加的框是从数据库发送给我的编程问题的完整长度。我正在基于过滤器填充带有不同问题的选项标签。

我唯一真正的问题是如何正确地“整体”查看问题而不是xxx像素的空间。（当前设置为600）。

选择标记是否仍可以通过显示多行来显示大量文本（一个很长的问题）？如果是的话，请帮助我理解如何，如果不是的话，那是我设置方式的另一种选择。

我需要能够选择它，因为我将选择的值（问题）添加到同一页面上显示的“考试”中，然后将其与所选的任何问题一起提交。

当前相关代码：

<select class="questionBank" id="questionSelect" size="10" style="width:600px;"></select>

//some of the script code to maybe help understand whats happening.
//this script is just the filter connecting to a backend program and pulling correct questions for population.
<script>
   function filterq(){
  var ajaxRequest = new XMLHttpRequest();
  ajaxRequest.onreadystatechange = function() {
    if (this.readyState == 4) {
      document.getElementById('questionSelect').innerText = null
      alert(this.responseText);

      for(i=0;i<21;i++){
      var questionDisplay = document.getElementById("questionSelect");
      var options = document.createElement("option");
      var data=JSON.parse(this.responseText);

      questionArray.push(data['list'][i]['question']);
      idArray.push(data['list'][i]['ID']);

      options.text=questionArray[i]+" (ID:"+idArray[i]+")";
      questionDisplay.add(options);
    } 
    </script>

Answer 1

似乎没有多行选项或带有中断的选项这种选择框似乎是您要的，但是您可以或者使用常规列表进行自定义：

document.getElementById("list").addEventListener("click", function(e) {
        const target = e.target;
        Array.from(document.getElementsByTagName("li")).forEach(item =>
          item.classList.remove("selected"),
        );
        target.classList.add("selected");
      });

.selected {
        background-color: blue;
        color: white;
      }

      li {
        list-style: none;
        cursor: pointer;
      }
}

    <ul id="list">
      <li class="selected">
        A <br />
        multiline <br />
        option
      </li>
      <li>
        Another<br />
        multi<br />
        line <br />
        option here
      </li>
      <li>
        Foo<br />
        Bar<br />
        Baz <br />
      </li>
    </ul>

选择标记和选项标记的HTML和CSS问题

1 个答案: