怎么做使下拉菜单可以编辑

可以参考一下这个：
http://blog.csdn.net/andy1217/archive/2008/11/28/3402283.aspx
<html>
<head>
<script>
function Val()
{
if(document.getElementById("b").value == "")
{
alert("输入不能为空");
return false;
}
else
{
var num2 =  document.getElementById("b").value;
alert(num2);
}
}
</script>
</head>
<body>
<table>
<tr>
<td style="font-size: 12px;">
既可以输入新的信息，又可以从下拉框中选择：
</td>
<td valign="top">
<select id="a" name="myselect" style=" width:220; position:absolute;clip: rect(2 100% 90% 201)" onchange="document.getElementById('b').value=this.value">
<option value=""> --请选择-- </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
<input id="b" name="myselect" type="text" size="32" style="font-size:12px; border: none; border-bottom: 1px solid #a0a0a0; background-color:transparent;">
</td>
</tr>
</table>
<input type="button" value="提交" onclick="Val()">
</body>
</html>
你去适适吧。
哈~ 谢谢楼上hemingwang0902提供的参考，本来我也以为必须要用DIV来模拟个下拉框的样式才能实现的。
借用楼上发的参考，我又更改了下，希望是楼主想要的：<!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>

调试易

怎么做使下拉菜单可以编辑

解决方案 »