在頁面中有三個下拉框, 如何用JS實現, 當一個下拉框選中一個值時, 另外兩個下拉框對應的值變為不可選狀態, 例如, 當三個下拉框分別選中2,5,9時, 第一個下拉框無法選中5,9, 第二個下拉框無法選中2,9, 第三個下拉框無法選中2,5,效果如下:
先上HTML結構代碼:
<select id='a'> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <select id='b'> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <select id='c' > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select>
下面是JS代碼:
select_a=document.getElementById('a'); select_b=document.getElementById('b'); select_c=document.getElementById('c'); s_a_child=select_a.children; s_b_child=select_b.children; s_c_child=select_c.children; //創建三個變量,用來分別接收被選中的option的索引值 var a= 0,b= 0,c=0; //當selection標簽發生狀態改變時 select_a.onchange=function(){ //循環遍歷selection標簽 for (var i=0;i<s_a_child.length;i++) { //當檢測到有標簽處於選中狀態時 if (s_a_child[i].selected) { //先把上一個被選中的option標簽的disabled變為false s_b_child[a].disabled=false; s_c_child[a].disabled=false; //再存儲這次選中的option標簽的索引值 a=i; //再把這次選中的標簽的索引值得option的disabled變為true s_b_child[i].disabled=true; s_c_child[i].disabled=true; } }; }; select_b.onchange=function(){ for (var i=0;i<s_b_child.length;i++) { if (s_b_child[i].selected) { s_a_child[b].disabled=false; s_c_child[b].disabled=false; b=i; s_a_child[i].disabled=true; s_c_child[i].disabled=true; } } } select_c.onchange=function(){ for (var i=0;i<s_c_child.length;i++) { if (s_c_child[i].selected) { s_b_child[c].disabled=false; s_a_child[c].disabled=false; c=i; s_b_child[i].disabled=true; s_a_child[i].disabled=true; } }; };