javascript当中options的用法


马克-to-win：选择列表
马克- to-win：马克 java社区：防盗版实名手机尾号： 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("山东", "济南", "枣庄", "威海"),
                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是这一项的值*/
                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]);
                /*下面两种写法的结果是一样的*/
                //         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);//第二个参数指定元素放置所在的索引号
            }
//            objSelect.add(objOption, objSelect.selectedIndex);
        }
        //-->
    </SCRIPT>
</HEAD>

<BODY onload="setProvinces()">
<!--Select.selectedIndex (Property)
qixy: through experiment: Select.selectedIndex is 0-based.但是第0项是“请选择省份-- ”
-->
<select name="select" id="province" onchange="setCity(this.selectedIndex);">
    <option value="0">请选择省份--</option>
</select>
<select name="select2" id="city">
    <option value="0">请选择城市--</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>