jsp 可编辑 select 下拉框

esmil

浏览: 42025 次

最近访客更多访客>>

overloving

guyuke

hzs0502030128

ztao2333

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>可编辑的下拉框</title>
<style type="text/css">
.combobx {width:100px;overflow:hidden;position:relative;padding:0;display:inline;}
.combobx input {width:80px;position:absolute;left:0;top:0;}
.combobx select {width:100px;position:absolute;left:0;top:0;clip:rect(auto auto auto 82px);}
</style>
</head>
<body>
<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>
</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>
</html>

分享到：