JavaScript控制下拉框(Select)

來源:互聯網
上載者:User

<select id="mysel" name="mysel">
  <option value="1">1 xxxxxxxxxx</option>
  <option value="2">2 yyyyyyyyyy</option>
  <option value="3">3 zzzzzzzzzz</option>
  <option value="4">4 wwwwwwwwww</option>
</select>
<button onclick="setSel(3)">設定第3項為選中項</button>
<button onclick="clearSel()">清空選擇框</button>
<button onclick="fillSel()">填充選擇框</button>
<button onclick="removeSel()">移除第一項</button>
<button onclick="editSel()">修改第一項</button>
<button onclick="sortMe(mysel)">排序</button>

<script type="text/javascript">
    function setSel(str){
        with(document.all){   
            for(var i=0;i<mysel.options.length;i++){               
                if (mysel.options[i].value==str){
                    mysel.selectedIndex=i;
                    break;
                }
            }           
        }
    }

    function clearSel(){
        with(document.all){   
            mysel.options.length=0;
        }
    }

    function fillSel(){
        with(document.all){
            mysel.options.length=0;
            mysel.options[0] = new Option("1 xxxxxxxxxx","1");
            mysel.options[1] = new Option("2 yyyyyyyyyy","2");
            mysel.options[2] = new Option("3 zzzzzzzzzz","3");
            mysel.options[3] = new Option("4 wwwwwwwwww","4");
            mysel.options[4] = new Option("5 aaaaaaaaaa","5");

            mysel.selectedIndex = 4;
        }
    }

    function removeSel(){
        with(document.all){
            mysel.remove(0);
            if (mysel.options.length>0){
                mysel.selectedIndex=0;
            }
        }
    }

    function editSel(){
        with(document.all){
            if (mysel.options.length>0){
                mysel.options[0] = new Option("這是新的第一項","new Value")
                mysel.selectedIndex=0;
            }
        }
    }

function sortMe(oSel){
var ln = oSel.options.length;
var arr = new Array(); // 這是關鍵區段

// 將select中的所有option的value值將儲存在Array中
for (var i = 0; i < ln; i++)
{
  // 如果需要對option中的文本排序,可以改為arr[i] = oSel.options[i].text;
  arr[i] = oSel.options[i].value;
}

arr.sort(); // 開始排序

// 清空Select中全部Option
while (ln--)
{
  oSel.options[ln] = null;
}

// 將排序後的數組重新添加到Select中
for (i = 0; i < arr.length; i++)
{
  oSel.add(new Option(arr[i], arr[i]));
}
}

</script>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.