goldrain

金色雨点

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  37 随笔 :: 2 文章 :: 239 评论 :: 0 Trackbacks

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

 


    
<select name="markcode" onChange="editable(this);">
    
<option value="value1">选项一</option>
    
<option value="">请输入</option>
    
</select>



<script language="javascript">
function editable(select1){
   
if(select1.value == ""){
      
var newvalue = prompt("请输入","");
      
if(newvalue){
         addSelected(select1,newvalue,newvalue);
      }
   }
}

function addSelected(fld1,value1,text1){
    
if (document.all)    {
            
var Opt = fld1.document.createElement("OPTION");
            Opt.text 
= text1;
            Opt.value 
= value1;
            fld1.options.add(Opt);
            Opt.selected 
= true;
    }
else{
            
var Opt = new Option(text1,value1,false,false);
            Opt.selected 
= true;
            fld1.options[fld1.options.length] 
= Opt;
    }
}
</script>


其中的function可以放到js文件中引用,这样只要对select框添加很少的代码就能支持可编辑了。支持IE和Firefox

posted on 2008-04-14 14:25 goldrain 阅读(12504) 评论(8)  编辑  收藏

评论

# re: 让下拉列表select可编辑的简便方法 2008-04-14 17:55 隔叶黄莺
这种做法还是可以接受了,简单了许多,怎么我以前就没想到这种办法了。不过现在用组件,反正也不需要自己写代码。

请不要显示每行代码前的序号,不然很少人愿意为你测试代码的。  回复  更多评论
  

# re: 让下拉列表select可编辑的简便方法 2008-04-14 20:32 goldrain
@隔叶黄莺

有道理,行号去掉了  回复  更多评论
  

# re: 让下拉列表select可编辑的简便方法 2008-04-16 12:04 walnutprince
思路可取 但是不好用 用户一定不会满意  回复  更多评论
  

# re: 让下拉列表select可编辑的简便方法 2008-04-16 12:15 goldrain
用户是否会满意,要看是选择为主还是编辑为主。如果多数情况是选择,少数情况需要编辑,这么做还是可以接受的。我感觉  回复  更多评论
  

# re: 让下拉列表select可编辑的简便方法 2008-04-20 10:31 mingj
更友好的是将input和select位置重叠
直接输入选项内容,回车即添加  回复  更多评论
  

# re: 让下拉列表select可编辑的简便方法 2008-09-27 20:56 vk
收藏  回复  更多评论
  

# re: 让下拉列表select可编辑的简便方法 2008-09-27 21:01 vk
现在的网页都有数据库,我想动态的通过加载数据库相关字段再加上少量的输入,用户会接受的,  回复  更多评论
  

# sdzs 2013-05-08 11:09 ssdf
sdf  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: