javascript當(dāng)中options的用法


馬克-to-win：選擇列表
馬克- to-win：馬克 java社區(qū)：防盜版實(shí)名手機(jī)尾號(hào)： 73203。



例 6.1（SelectOptionAddIEFF.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <TITLE>
    </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
        <!--

        /* a typical value is that document.getElementById("province").options[1]="河北", document.getElementById("city").options[1]= arr[0][1]= "石家莊" */
        var arr = new Array(
                new Array("河北", "邯鄲","石家莊"),
                new Array("山東", "濟(jì)南", "棗莊", "威海"),
                new Array("河南", "開封", "鄭州", "洛陽",  "南洋")
        );

        function setProvinces()
        {
            /* arr.length is the row number of arr, arr[i][0] the first column. in other words, 河北,山東,河南   */
            for (var i = 0; i < arr.length; i++)
            {   /*加到option最后,new Option(str1,str2)str1 是頁面中看到的描述,而str2是這一項(xiàng)的值*/
                document.getElementById("province").options[i + 1] = new Option(arr[i][0], arr[i][0]);
            }
        }
        function setCity(i)
        {   alert(i+" "+document.getElementById("province").selectedIndex+document.getElementById("province").value+document.getElementById("province").options[document.getElementById("province").selectedIndex].text+document.getElementById("province").options[document.getElementById("province").selectedIndex].value);
            document.getElementById("city").options.length = 1;//reset city
            for (var j = 1; j < arr[i - 1].length; j++)
            {
                opt = new Option(arr[i - 1][j], arr[i - 1][j]);
                /*下面兩種寫法的結(jié)果是一樣的*/
                //         document.getElementById("city").options[j] = new Option(arr[i - 1][j], arr[i - 1][j]);
                document.getElementById("city").add(opt,document.getElementById("city").options.length);//第二個(gè)參數(shù)指定元素放置所在的索引號(hào)
            }
//            objSelect.add(objOption, objSelect.selectedIndex);
        }
        //-->
    </SCRIPT>
</HEAD>

<BODY onload="setProvinces()">
<!--Select.selectedIndex (Property)
qixy: through experiment: Select.selectedIndex is 0-based.但是第0項(xiàng)是“請(qǐng)選擇省份-- ”
-->
<select name="select" id="province" onchange="setCity(this.selectedIndex);">
    <option value="0">請(qǐng)選擇省份--</option>
</select>
<select name="select2" id="city">
    <option value="0">請(qǐng)選擇城市--</option>
</select>
</BODY>
</HTML>







例 6.2（SelectOptionDeleteIEFF.html）




<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script language="JavaScript">

        function dr(typ){
            var objSelect = document.mf.ms;
            if (typ == true)
            /*
             下列兩種方法效果一樣.
             Select.options[] (Collection)
             An array of options objects one each per menu item.

             If you want to remove one, then simply assign null to its array entry and the option will be removed from the popup menu.

             Select.remove() (Method)
             Remove an item from a select list collection.

             JavaScript syntax: - ms.remove(anIndex)
             the following two both can work.
             */
            {
                objSelect.options[objSelect.selectedIndex] = null;
                //   objSelect.options.remove(objSelect.selectedIndex);
            }
            else
                objSelect.remove(objSelect.selectedIndex);
        }
    </script>
</head>
<body>
<form name="mf">
    <select name="ms" size="2">
        <option value="張三" Selected>張三 l</option>
        <option value="李四">李四 l</option>
        <option value="王五">王五 l</option>
    </select>
    <input type="button" onclick="dr(true)" value="delete">
    <input type="button" onclick="dr(false)" value="Remove"><br>
</form>
</body>
</html>