如何在HTML中实现combo box下拉框选中内容的显示功能

初始需求 #

我用HTML做了一个下拉框，初始代码如下：

<div>
    <select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>

需要完成三个要求：

• 给外层<div>标签分配ID
• 给下拉框绑定事件触发JS函数
• 函数中获取下拉框的选中值，通过innerHTML输出到页面展示

最终实现代码 #

HTML部分 #

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="script.js"></script>
<meta charset="utf-8">
<title>示例页面</title>
</head>
<body>
  <select id="box1" onChange="function1(this);">
    <option value="">Volvo</option>
    <option value="">Fiat</option>
    <option value="">Seat</option>
    <option value="">Audi</option>  
  </select>
<div id="div1"></div>
</body>
</html>

JS部分（单独存为script.js文件） #

function function1(element) {
    // 获取选中项的文本内容
    var selectedText = element.options[element.selectedIndex].text;
    // 将结果写入指定div中展示
    document.getElementById("div1").innerHTML = "您选中的是：" + selectedText;
}

内容的提问来源于stack exchange，提问作者Azur