<head><title>练习</title></head>
<style type="text/css" >
.f1{font-size:10px;}
</style>
<script type="text/javascript">
window.onload = function(){
var form = document.getElementById("firstForm");
var opts = form.subjects.options;
var info = form.info;
form.subjects.onchange = function(){
var form = document.getElementById("firstForm");
info.value = `this.selectedIndex` +"" + opts[0].text; // 如果是使用form的话，得到undefined；使用this缺可以
}
}
</script>
<body style="margin-left:20px;margin-top:20px;">
<form action="#" target="_self" id="firstForm" method="POST">
<select name="subjects" size="12">
<optgroup label="基础课程">
<option value="datamining" selected="true">数据挖掘</option>
<option value="clustering">聚类</option>
<option value="classify">分类</option>
</optgroup>
<optgroup label="必修课程">
<option value="java">JAVA</option>
<option value="cpp">c++</option>
</optgroup>
<optgroup label="选修课程">
<option value="cars">汽车艺术</option>
<option value="movies">电影鉴赏</option>
</optgroup>
</select></br>
<textarea name="info" rows="12" cols="100"></textarea><br/>
</form>
</body>
对于this.selectedIndex部分，如果使用已经获取到的form变量，得不到选中项的索引；使用this却可以，不知道为什么？
