用JS實現,當一個下拉框選擇一個值時,另外兩個下拉框的對應的值變為不可選


在頁面中有三個下拉框, 如何用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;
            }
        };
    };
    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM