select选择框变得可以输入、编辑

最新推荐文章于 2024-05-21 16:24:56 发布

魔拉宝

最新推荐文章于 2024-05-21 16:24:56 发布

阅读量1.4w

点赞数

分类专栏：特效代码网页设计教程全集文章标签： function javascript python c java null

本文链接：https://blog.csdn.net/jeefchen/article/details/5892983

版权

特效代码同时被 3 个专栏收录

109 篇文章 1 订阅

订阅专栏

教程全集

61 篇文章 0 订阅

订阅专栏

网页设计

59 篇文章 0 订阅

订阅专栏

一、可编辑的select

按回车键输入新内容，按DEL删除选中内容<br>
<body bgcolor="#fef4d9" οnlοad="s1.focus();">
<script language="JavaScript">

</script>
<select name=s1 οnkeydοwn="catch_keydown(this);" οnkeypress="catch_press(this);" style="font-size:12px;"><option>-12121212121212</option><option>232323232323</option><option>343434343434</option><option>45454545454545</option><option>565656565656</option></select>

二、可输入：

<html>
<head>
<title>助记码的select选择完美方案</title>
</head>
<script>

var addressName=new Array("沈阳","北京","大连","抚顺","天津","上海");
var addressHelpCode=new Array("sy","bj","dl","fs","tj","sh");
var getSelectHelpCode=document.getElementsByName("selectHelpCode");

</script>
<body οnlοad="init()">
<select name="selectHelpCode" onBlur="vertiyt(this)" οnkeydοwn="catch_keydown(this)" οnkeypress="writeSelect(this)"><option>--</option></select>
<br>
让select变得可以输入，并且可以验证。
<br>
这个功能是我在一个项目中所用到的。
<br>
希望对大家有用！
</body>
</html>

function pp(){

unitid.options[9]=new Option(ok=(unitid.options[9])?unitid.options[9].innerText+String.fromCharCode(event.keyCode):String.fromCharCode(event.keyCode),"client")

unitid.selectedIndex=9;

}

function edit(){

if(unitid.options[9]){

if(event.keyCode==8){

var str=unitid.options[9].innerText;

var len=str.length;

unitid.options[9].innerText=str.substring(0,len-1);

if(unitid.options[9].innerText=="")unitid.remove(9);

}

if(event.keyCode==13)return false;

if(event.keyCode==32){

unitid.options[9].innerText+=" ";

}

</script>

</select>

<script language="javascript">
function changeF()
{
document.getElementById('makeupCo').value=
document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
}
</script>
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;
height:19px;clip:rect(-1px 190px 190px 170px);">
<select name="makeupCoSe" id="makeupCoSe" style="width:190px;height:20px;margin:-2px;" onChange="changeF();">
<option id='1' value='java'>java</option>
<option id='2' value='c++'>c++</option>
<option id='3' value='python'>python</option>
<OPTION id="99999" VALUE="" SELECTED>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt
solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
<input type="text" name="makeupCo" id="makeupCo" value="请选择或输入" style="width:170px;height:15px;border:0pt;">
</span>