既能輸入又能選擇的下拉框

阿新 • • 發佈：2019-01-13

今天做專案時遇到了一個小難題：就是使用者可以自己輸入又能選擇的下拉框

程式碼如下：

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

既能輸入又能選擇的下拉框

Web前端—既可以輸入又可以選擇的input框

既能輸入又能選擇的下拉框

選擇輸入控制元件，既可以輸入又可以選擇的控制元件

【html】可輸入可選擇下拉框

如何使select框既可以輸入又可以選擇

帶輸入查詢功能匹配下拉框的幾種實現方式

jquery省份城市聯動選擇下拉框

C#如何在選擇下拉框選項的同時顯示對應資訊在窗體上

有輸入功能的HTML下拉框--並且可以動態獲取文字框的值

selenium定位百度搜索框輸入關鍵字後，下拉框聯想出來的怎麼定位

easyUI中年份，月份選擇下拉框選擇

js根據輸入內容自動填充下拉框

vue對select下拉框賦初值後，不能進行選擇的問題

工行網銀網上支付提示選擇證書，但下拉框是空白，無法選擇導致不能支付解決辦法

DataTables能實現移動端的下拉載入嗎？可以，需要藉助一下Scroller外掛

Ajax 的同步和非同步，下拉框聯動回顯第二個不能回顯成功

Peter教你談情說AI | 07決策樹(上)—既能迴歸又能分類的模型

input框既可以手動輸入亦可以進行下拉模糊查詢

js：可輸入可選擇的select下拉框,可及時匹配包含輸入的內容（相容ie）

可輸入可選擇的下拉框（input select）並且輸入框獲得下拉的內容

既能輸入又能選擇的下拉框

相關推薦