JS动态创建.docx
- 文档编号:11982543
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:12
- 大小:17.54KB
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"%> varselprov=newArray(); varselarea=newArray(); <% out.print(""); out.print(""); %> functionprov_chg() { with(document.all){ if(hprov.value){ varln=harea.options.length; while(ln--){ harea.options[ln]=null; } ln=hcity.options.length; while(ln--){ hcity.options[ln]=null; } for(vari=0;i harea.add(selprov[hprov.value][i]); } } } if(document.form1.hprov.value! ="") { d2.style.display=""; d1.style.display="none"; d3.style.display="none"; } else{ } } functionarea_chg() { if(document.form1.harea.value=="goUp") { document.form1.hprov.value=""; d1.style.display=""; d2.style.display="none"; d3.style.display="none"; }else if(document.form1.harea.value! ="") { d1.style.display="none"; d2.style.display="none"; d3.style.display=""; } with(document.all){ if(harea.value){ varln=hcity.options.length; while(ln--){ hcity.options[ln]=null; } for(vari=0;i hcity.add(selarea[harea.value][i]); } } } } functioncity_chg(){ if(document.form1.hcity.value=="goUp") { d1.style.display="none"; d2.style.display=""; d3.style.display="none"; } } inline"id="d1">省份 <% out.print(" out.print(" %> none"id="d2">地区 none"id="d3">县市 中,只有一项是可见的