在html下拉框里让每个选项执行对应事件

Question

js是：
function show(index) {
if (index == 1) {
document.getElementById("music").style.display="block";
document.getElementById("videos").style.display="none";
}
else {
document.getElementById("music").style.display="none";
document.getElementById("vidoes").style.display="block";
}
}
html：
<label id="select" for="products" accesskey="o">Show Products </label>
<select id="products" name="products" tabindex="10" >
<option value=" " selected="selected" > </option>
<option value="All">All</option>
<option value="Music">Music</option>
<option value="Video">Videos</option>
</select>
怎样让点music的时候执行show（1）；点videos的时候执行show（2）；

Answer 1

<select id="products" name="products" tabindex="10" >
                    <option value=" " selected="selected" > </option>
                    <option value="All">All</option>
                    <option value="Music">Music</option>
   <option value="Video">Videos</option>     
</select>
//改为:
<select id="products" name="products" tabindex="10"  onchange="show(this.value)">

                    <option value=" " selected="selected" > </option>

                    <option value="All">All</option>

                    <option value="1">Music</option>

   <option value="2">Videos</option>     

</select>
//  onchange="show(this.value)" 三指当前元素改变时触发
// 所以show(index) 中的参数值还有可能是all
所以把js部分改为

if (index == 1) {

document.getElementById("music").style.display="block";

document.getElementById("videos").style.display="none";

}

else if(index == 2) {

document.getElementById("music").style.display="none";

document.getElementById("vidoes").style.display="block";

}
        else{
document.getElementById("music").style.display="block";


document.getElementById("vidoes").style.display="block"; 
}

这应该是你想要的了

Answer 2

<select id="products" name="products" tabindex="10" >                    <option value=" " selected="selected" > </option>                    <option value="All">All</option>                    <option value="Music">Music</option>           <option value="Video">Videos</option>     </select>//改为:<select id="products" name="products" tabindex="10"  onchange="show(this.value)">                     <option value=" " selected="selected" > </option>                     <option value="All">All</option>                     <option value="1">Music</option>            <option value="2">Videos</option>      </select>//  onchange="show(this.value)" 三指当前元素改变时触发// 所以show(index) 中的参数值还有可能是all所以把js部分改为

if (index == 1) {         document.getElementById("music").style.display="block";         document.getElementById("videos").style.display="none";     }     else if(index == 2) {         document.getElementById("music").style.display="none";         document.getElementById("vidoes").style.display="block";            }        else{document.getElementById("music").style.display="block";          document.getElementById("vidoes").style.display="block"; }本回答被网友采纳