Проблемы HTML и CSS с тегами select и option

Question

У меня возникают трудности с правильной настройкой окна выбора, чтобы справиться с тем, что я хочу, чтобы он делал.

Я новичок в CSS / HTML и в настоящее время делаю проект, целью которого является создание веб-сайта, который будет повторять экзамен / студенческое онлайн-тестирование.

Текущее поле, добавленное на скриншоте, - это полная длина вопроса программирования, отправленного мне из базы данных. Я заполняю теги параметров различными вопросами на основе фильтра.

Моя единственная реальная проблема заключается в том, как правильно «просмотреть» вопрос целиком, а не в количестве ххх пространства в пикселях. (в настоящее время установлено на 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>