注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

何静媛 勇往直前

学无止境!

 
 
 

日志

 
 
 
 

下拉框的可编辑  

2013-10-19 21:28:20|  分类: 系统 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
因为最近一直在做考试系统,对于下拉框这个我们最熟悉不过的控件却给我带来了一些小麻烦。为了使系统更加人性化,方便我们使用,要实现下拉框的可编辑,删除,修改的功能,看似简单,但是我们使用的下拉框却不支持这些。
笼统实现:

<form method="post" action="#">
学历:
<div class="combobx"><input id="txtSelectValue" type="text" name="xxx" onblur="editOption();" />
<select id="selectDemo" onchange="changeOption();">
<option value="xiaoXue">小学</option>
<option value="zhongXue">中学</option>
<option value="daXue">大学</option>
<option value="daXue">添加</option>
</select>
</div>

<input type="hidden" id="hiddenIndex" value="" />
<script type="text/javascript">

var selectObj = document.getElementById("selectDemo");
var hiddenObj = document.getElementById("hiddenIndex");
// 切换下拉框选项时的操作
function changeOption() {
// 将当前选中的下拉框选项文本赋值给TxtBox
document.getElementById("txtSelectValue").value = selectObj.options[selectObj.selectedIndex].innerHTML;
// 保存当前所选下拉框选项的索引
hiddenObj.value = selectObj.selectedIndex;
}

// 修改下拉框选项值时的操作
function editOption() {
var txtObj = document.getElementById("txtSelectValue");
// 验证编辑后的文本
if (txtObj.value != "") {
// 更改下拉框选项的文本
selectObj.options[hiddenObj.value].innerHTML = txtObj.value;
// 更改下拉框选项的Value
// selectObj.options[hiddenObj.value].value = txtObj.value;
} else {
alert("请填写有效的学历!");
}
}
window.onload = function() {
// 首次加载页面时给input value赋值
document.getElementById("txtSelectValue").value = selectObj.options[selectObj.selectedIndex].innerHTML;
hiddenObj.value = selectObj.selectedIndex;
}
</script>
</form>
</body>

当然还有很多不完善的地方,还需要不断修改和美化,而且这也仅仅是一种思路,应用文本框和下拉框组合,使用隐藏和显示的方式来达到效果。
  评论这张
 
阅读(232)| 评论(12)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017