时间戳

首页 > 解决方案 > 选择和选项标签的 HTML 和 CSS 问题

javascript - 选择和选项标签的 HTML 和 CSS 问题

问题描述

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

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

标签： javascripthtmlcssfunction

解决方案

在这种类型的选择框中似乎不可能有多行选项或带有中断的选项，这似乎是您所要求的，但您也可以使用常规列表进行自定义：

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>

推荐阅读