javascript当中options的用法
javascript当中options的用法
6.options 选择列表 例 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>
更多请见：https://blog.csdn.net/qq_43650923/article/details/102467341
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。