要让网页中的下拉列表支持可编辑,可不是件省心的事,上网搜索了下,也有一些解决方法,做起来总不够简便。我做了个简单的实现,主要是通过给select添加选项的方式,达到可以修改选项的目的。代码如下,演示 http://www.jackersoft.cn/webapp/test/selectedit.html:
1

2 < select name ="markcode" onChange ="editable(this);" >
3 < option value ="value1" > 选项一 </ option >
4 < option value ="" > 请输入 </ option >
5 </ select >
6
7
8
9 < script language ="javascript" >
10 function editable(select1){
11 if (select1.value == "" ){
12 var newvalue = prompt( " 请输入 " , "" );
13 if (newvalue){
14 addSelected(select1,newvalue,newvalue);
15 }
16 }
17 }
18
19 function addSelected(fld1,value1,text1){
20 if (document.all) {
21 var Opt = fld1.document.createElement( " OPTION " );
22 Opt.text = text1;
23 Opt.value = value1;
24 fld1.options.add(Opt);
25 Opt.selected = true ;
26 } else {
27 var Opt = new Option(text1,value1, false , false );
28 Opt.selected = true ;
29 fld1.options[fld1.options.length] = Opt;
30 }
31 }
32 </ script >
33
34
35

2 < select name ="markcode" onChange ="editable(this);" >
3 < option value ="value1" > 选项一 </ option >
4 < option value ="" > 请输入 </ option >
5 </ select >
6
7

8
9 < script language ="javascript" >
10 function editable(select1){
11 if (select1.value == "" ){
12 var newvalue = prompt( " 请输入 " , "" );
13 if (newvalue){
14 addSelected(select1,newvalue,newvalue);
15 }
16 }
17 }
18
19 function addSelected(fld1,value1,text1){
20 if (document.all) {
21 var Opt = fld1.document.createElement( " OPTION " );
22 Opt.text = text1;
23 Opt.value = value1;
24 fld1.options.add(Opt);
25 Opt.selected = true ;
26 } else {
27 var Opt = new Option(text1,value1, false , false );
28 Opt.selected = true ;
29 fld1.options[fld1.options.length] = Opt;
30 }
31 }
32 </ script >
33

34
35
