JS动态创建.docx
《JS动态创建.docx》由会员分享，可在线阅读，更多相关《JS动态创建.docx（12页珍藏版）》请在冰豆网上搜索。
JS动态创建
1.1.动态创建select
2.
3. function createSelect（）{
4. var mySelect = document.createElement（"select"）;
5. mySelect.id = "mySelect";
6. document.body.appendChild（mySelect）;
7. }
8.
9.2.添加选项option
10.
11. function addOption（）{
12. //根据id查找对象，
13. var obj=document.getElementById（'mySelect'）;
14. //添加一个选项
15. obj.add（new Option（"文本","值"））; //这个只能在IE中有效
16. obj.options.add（new Option（"text","value"））; //这个兼容IE与firefox
17. }
18.
19.3.删除所有选项option
20.
21. function removeAll（）{
22. var obj=document.getElementById（'mySelect'）;
23. obj.options.length=null;
24. }
25.
26.4.删除一个选项option
27.
28.function removeOne（）{
29. var obj=document.getElementById（'mySelect'）;
30. //index,要删除选项的序号，这里取当前选中选项的序号
31. var index=obj.selectedIndex;
32. obj.options.remove（index）;
33.}
34.
35.5.获得选项option的值
36.
37. var obj=document.getElementById（'mySelect'）;
38.
39. var index=obj.selectedIndex; //序号，取当前选中选项的序号
40.
41. var val = obj.options[index].value;
42.
43.6.获得选项option的文本
44.
45. var obj=document.getElementById（'mySelect'）;
46.
47. var index=obj.selectedIndex; //序号，取当前选中选项的序号
48.
49. var val = obj.options[index].text;
50.
51.7.修改选项option
52.
53. var obj=document.getElementById（'mySelect'）;
54.
55. var index=obj.selectedIndex; //序号，取当前选中选项的序号
56.
57. var val = obj.options[index]=new Option（"新文本","新值"）;
58.
59.8.删除select
60.
61. function removeSelect（）{
62. var mySelect = document.getElementById（"mySelect"）;
63. mySelect.parentNode.removeChild（mySelect）;
64. }
为了便于各位的调试，
我将代码进行了简化，取数据部分我去掉了，各位可修改成自己用的数据
二、说明
现将该设计中，用到的主要技巧列在下面
1。
将数据动态填入js的数组
用如下3句话实现
out.print（""）;
具体应用时，可以用循环，将数据不断的out.print（",newOption（xxx,yyy）"）;添加进去
2.1。
当选择了省份后，将地区信息填入地区列表
主要用了下面这个循环
for（vari=0;i harea.add（selprov[hprov.value][i]）;
}
2.2。
当选择了地区后，将县市信息填入城市列表（实现方法同上）
4。
用了隐含技巧，将3个select放入在同一行中的3个
| 中，
然后用none">进行隐藏，每次3个
中，只有一项是可见的 如： 当需要地区显示时，用如下js语句 d2.style.display=""; d1.style.display="none"; d3.style.display="none"; 三、源代码 <％@pagecontentType="text/html;charset=GBK"％> city
varselprov=newArray（）; varselarea=newArray（）; <％ out.print（""）; out.print（""）; ％>
|
inline"id="d1">省份 <％ out.print（"浙江省"）; out.print（"福建省"）; ％> none"id="d2">地区 none"id="d3">县市 |
|