<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<style type="text/css">
div{display:none;}
</style>
<body>
<select name="select1" id="select1">
<option name="option1" id="option1" value="value1">內部通知</option>
<option name="option2" id="option2" value="value2">實驗專案</option>
</select>
<div id="div1">
<label for="inputXiangmu" class="col-sm-2 control-label" style="text-align: left" >作者成員：</label>
<input type="text" class="form-control" id="inputXiang" placeholder="輸入內容"/>
</div>
<div id="div2" class="zuozhe">
<label for="inputXiangmu" class="col-sm-2 control-label" style="text-align: left" >作者成員：</label>
<input type="text" class="form-control" id="inputXiang" placeholder="輸入內容"/>
<br>
<label for="inputArticle" class="col-sm-2 control-label" style="text-align: left;">上限日期：</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="日曆" />
<span class="input-group-addon" >
<span class="glyphicon glyphicon-calendar" ></span>
</span>
</div>
</div>
<br>
<label for="inputArticle" class="col-sm-2 control-label" style="text-align: left;">進入檢視：</label>
<div class="col-sm-10">
<p style="margin-top: 5px;"><a>www.baidu.com</a></p>
</div>
<br>
</body>
<script>
var select = document.getElementById("select1");
select.onchange = function(){
var options = select.getElementsByTagName("option");
for(var i = 0; i < options.length; i++){
if(options[i].selected){
var divid = options[i].id.replace("option","div");
var divs = document.getElementsByTagName("div");
for(var j = 0; j < divs.length; j++){
if(divid == divs[j].id){
divs[j].style.display = "block";
}else{
divs[j].style.display = "none";
}
}
}
}
}
</script>
</html>
