既能输入又能选择的下拉框

最新推荐文章于 2024-04-03 14:36:32 发布

原创最新推荐文章于 2024-04-03 14:36:32 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 3 个专栏收录

19 篇文章

订阅专栏

9 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

这篇博客介绍了一种实现既能输入又能选择的下拉框的方法，通过HTML、CSS和JavaScript（jQuery）来创建。用户在下拉框中既可以输入自定义内容，也可以从预设选项中选择。此外，代码示例还展示了如何根据选定的选项自动填充相关输入字段的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做项目时遇到了一个小难题：就是用户可以自己输入又能选择的下拉框

代码如下：

<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以输入的select标签</title>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<body>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>希望用于</td>
<select name="shool" id="select" onchange="bb()" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)">
<option value="0">请输入用途</option>
<option value="1">置业定投</option>
<option value="2">亲子定投</option>
<option value="3">养老定投</option>
<option value="4">指赢定投</option>
<option value="5">大额定投</option>
<option disabled="disabled" selected="selected">请输入或选择项目</option>
</select></td>
</tr>
<tr>
<td>我将准备</td>
<td><input type="text" name="je" id="je" onkeyup="this.value= this.value.replace(/\D/g, '');" onafterpaste="this.value=this.value.replace(/\D/g,'')" >
元</td>
</tr>
<tr>
<td>我计划定投</td>
<td><input type="text" name="select3" id="selYear" onkeyup="this.value= this.value.replace(/\D/g, '');" onafterpaste="this.value=this.value.replace(/\D/g,'')" >
年</td>
</tr>
<tr>
<td>参考年均收益率为</td>
<td><input type="text" name="sy" id="sy" placeholder="0" onkeyup="this.value= this.value.replace(/\D/g, '');" onafterpaste="this.value=this.value.replace(/\D/g,'')" >
%</td>
</tr>
<tr>
<td> </td>
<td><button onclick="calculator();" class="btn btn-warning btn-lg btn-calculator">开始计算</button> 您每月所需要投入<font color="#80071B"><a id="calculator_result" style="color: #FF0033"></a></font></td>
</tr>
</table>
<script>
var Select = {
del : function(obj,e){
if((e.keyCode||e.which||e.charCode) == 8){
var opt = obj.options[0];
if(opt.text=="请输入用途") opt.text="";
opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);
}
},
write : function(obj,e){
var i=0;
if((e.keyCode||e.which||e.charCode) == 8)return ;
var opt = obj.options[0];
if((e.keyCode||e.which||e.charCode) != 13){
opt.text += String.fromCharCode(e.charCode||e.which||e.keyCode);
}
if((e.keyCode||e.which||e.charCode) == 13){
for(i=1;i< obj.options.length;i++){
if(obj.options[i].text==opt.text){
obj.options[i].selected = "selected";
opt.text="";
opt.value="0";
break;
}
else{
opt.value=opt.text;
opt.selected = "selected";
}
}
}
}
}
</script>
<script type="text/javascript">
function bb(){
var obj=document.getElementById('select');
var d=obj.options[obj.options.selectedIndex].value;
if(d==1){
document.getElementById('je').value=200000;
document.getElementById('selYear').value=5;
document.getElementById('sy').value=20;
}
if(d==2){
document.getElementById('je').value=50000;
document.getElementById('selYear').value=3;
document.getElementById('sy').value=18;
}
if(d==3){
document.getElementById('je').value=80000;
document.getElementById('selYear').value=3;
document.getElementById('sy').value=10;
}
if(d==4){
document.getElementById('je').value=100000;
document.getElementById('selYear').value=3;
document.getElementById('sy').value=18;
}
if(d==5){
document.getElementById('je').value=150000;
document.getElementById('selYear').value=5;
document.getElementById('sy').value=10;
}

}

function calculator(){
var je=$("#je").val();
var selYear=$("#selYear").val();
var sy=$("#sy").val();
var cc=document .getElementById('select');
var ee=cc.options[cc.options.selectedIndex].text;
alert(ee);
var dd=cc.options[cc.options.selectedIndex].value;
if(ee=='请输入用途'){
alert("请您填写用途");
}else if(je==null || je==''){
alert("请您填写经费");
}else if(selYear==null || selYear==''){
alert("请您填写定投年限");
}else if(selYear<=0 || selYear>99){
alert("请您填写定投年限在1-99之间");
}else if(sy==null || sy==''){
alert("请您填写参考年均收益率");
}else{
var A=0;
sy=sy/100.0;
A=(parseInt) (((je*sy)/(Math.pow((1+sy), selYear)-1))/12);
$("#calculator_result").html(A+"元");
}
}
</script>

</body>
</html>