讓下拉列表select可編輯的簡便方法
要讓網頁中的下拉列表支持可編輯,可不是件省心的事,上網搜索了下,也有一些解決方法,做起來總不夠簡便。我做了個簡單的實現,主要是通過給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
posted on 2008-04-14 16:54 々上善若水々 閱讀(3996) 評論(1) 編輯 收藏 所屬分類: JavaWeb