1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.     /* 公用样式 */
  8.       html,body,p,input{
  9.         margin:0px;
  10.         padding:0px;
  11.       }
  12.       .question-type{
  13.         margin-left: 10px;
  14.         margin-top: 10px;
  15.       }
  16.       .question-type select{
  17.         width: 120px;
  18.         height:30px;
  19.         line-height:30px;
  20.         color:#020202;
  21.         border-radius: 3px;
  22.       }
  23.       .box-div{
  24.         border:1px solid #d5d5d5;
  25.         width: 200px;
  26.         height: 50px;
  27.         color:#383838;
  28.         margin-left: 10px;
  29.         margin-top: 60px;
  30.         border-radius:3px;
  31.         padding: 10px;
  32.         font-size:14px;
  33.       }
  34.     </style>
  35.     <script type="text/javascript">
  36.       function change(){
  37.         var a = document.getElementById('content');
  38.         var b = document.getElementById('qVal');
  39.         var c = b.selectedIndex;
  40.         var text = b.options[c].text;
  41.         a.innerHTML= text;
  42.       }
  43.     </script>
  44.   </head>
  45.   <body>
  46.   <form class="question-type" >
  47.     <select id='qVal' onchange="change()">
  48.       <option value ="0">请选择题型</option>
  49.       <option value ="1">HTML应用题</option>
  50.       <option value ="2">JS应用题</option>
  51.       <option value= "3">MySQL选择题</option>
  52.     </select>
  53.   </form>
  54.   <div class='box-div' id='content'></div>
  55.   </body>
  56. </html>

2021-09-25_211251.jpg2021-09-25_211307.jpg2021-09-25_211315.jpg

另外的select小知识点

var obj = document.getElementById(”select_id”); //获取select标签对象

var index = obj.selectedIndex; // 选中索引，获取下拉框的索引值（第几个）

var text = obj.options[index].text; // 选中文本，获取那一个下拉框中的内容

var value = obj.options[index].value; // 选中值，获取value的值

 selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
注释：若允许多重选择，则仅会返回第一个被选选项的索引号。