Select控件連動的問題

<script>
function sel_genre1(o){
 sp = document.getElementsByTagName("SPAN") 
 for(i=0;i<sp.length;i++)
 {
 if(sp[i].getAttribute("value"))
{
 if(o.options[o.selectedIndex].value!="")
 {
 if(sp[i].getAttribute("value")!="")
 {
 if(sp[i].getAttribute("value")==o.options[o.selectedIndex].value)
  sp[i].style.textDecoration="none"
 else 
  sp[i].style.textDecoration="underline"  
 }
}
else
{
 sp[i].style.textDecoration="none"
}
} 
 }
}function sel_genre2(o)
{
 sp = document.getElementsByTagName("SPAN") 
 for(i=0;i<sp.length;i++)
 {
 if(sp[i].getAttribute("value"))
{
sp[i].style.textDecoration="underline"
}
}
o.style.textDecoration="none"
}
</script>
<body>
<div id="genre1">
  <select size="1" name="D1" onChange="sel_genre1(this)">
    <option value="">　（选择）　</option>
　　<option value="01">AA</option> 
　　<option value="02">BB</option> 
　　<option value="03">CC</option> 
  </select>
</div><div id="genre2">
  <span value="01" onClick="sel_genre2(this)">AA</span>
  <span>－</span>
  <span value="02" onClick="sel_genre2(this)">BB</span>
  <span>－</span>
  <span value="03" onClick="sel_genre2(this)">CC</span>
</div></body>