select和option标签的HTML和CSS问题

Question

我无法正确调整选择选项框来处理我想要它做的事情。

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

屏幕截图中的当前框插入是从数据库发送给我的编程问题的全长。 我根据过滤器使用不同的问题填充选项标签。

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

select标签是否可以通过显示多行来显示大量文本（长问题）？ 如果是的话，请帮助我理解如果没有......如何设置它的替代途径。

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

问题截图

现行相关守则：

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