在html中编写程序，怎样实现当①号列表框中选择不同的题型时，能够在②号文本框中显示不同的题型内容

问题遇到的现象和发生背景

我的解答思路和尝试过的方法

试过多种办法，但不能实现图片中的效果。
请问各位程序猿，在html中编写程序，怎样实现当①号列表框中选择不同的题型时，能够在②号文本框中显示不同的题型内容。

题型那一栏很显然是用的select标签
下面的文本框随意,ui+li ,div都行
js获取select选中的索引值,根据对应索引值的把对应的数据for循环到文本框中的子标签就行了

随便写了下 差不多能实现, 我把文本框里面的子项写死了,实际可以根据数据创建对应的元素,懒的写那么多了,有兴趣自己可以补充补充

<select name="test" id="test">
    <option>单选题</option>
    <option>多选题</option>
    <option>问答题</option>
    <option>送分题</option>
  </select>
  <div id="textarea">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>

 var str0 = ['我如老苍鹘', '寂寞愁独弄', '杖屦勤来游', '雪霁梅欲动']
    var str1 = ['幽人睡觉夜未央', '四檐悬溜声浪浪', '老农自喜知时节', '夜半呼儿起饭牛']
    var str2 = ['fskajfaljsgfasg', 'fskajfaljsgfasg', 'fskajfaljsgfasg', 'fskajfaljsgfasg']
    var str3 = ['fskajfaljsgfasg', 'fskajfaljsgfasg', 'fskajfaljsgfasg', 'fskajfaljsgfasg']
    var list = [str0, str1, str2, str3]
    var slt = document.querySelector('#test')
    var ps = document.querySelectorAll("p")
    for (i = 0; i < ps.length; i++) {
      ps[i].innerText = list[0][i]  // 页面首次渲染时,给文本框填充默认索引的数据
    }
    slt.addEventListener('change', function sltchanged() {
      var index = slt.selectedIndex    //获取选中的select option的索引值
      for (i = 0; i < ps.length; i++) {

        ps[i].innerText = list[index][i]
      }
    })

可以根据上面select选项选中的值来控制下面列表不同内容的显示，例如当切换选择的是单选题绑定值是0，控制下面单选提类型列表显示其他隐藏，如果是1控制多选题类型显示，其他隐藏