可编辑的下拉框

最新推荐文章于 2017-02-04 10:16:10 发布

mw666999

最新推荐文章于 2017-02-04 10:16:10 发布

阅读量107

点赞数

分类专栏： js 文章标签： XHTML Blog HTML

本文链接：https://blog.csdn.net/mw666999/article/details/83695133

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

转自：http://sinian1120na.blog.163.com/blog/static/245805082009766015820/

<!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>

mw666999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可编辑的下拉框

转自：http://sinian1120na.blog.163.com/blog/static/245805082009766015820/[code="java"]可编辑的下拉框.combobx {width:100px;overflow:hidden;position:relative;padding:0;display:inline;}.combobx...
复制链接

扫一扫