2. 程式人生 > >select下拉框可輸入值

select下拉框可輸入值

阿新 • • 發佈：2019-01-17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>輸入框的下拉提示</title>
<style type="text/css">
<!--
body{background:#fff}
.Menu {
position:relative;
width:204px;
height:127px;
z-index:1;
background: #FFF;
border:1px solid #000;
margin-top:-100px;
display:none;
}
.Menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:auto;
overflow:hidden;
z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
change:expression(
this.onmouseover=function(){
this.style.background="#F2F5EF";
},
this.onmouseout=function(){
this.style.background="";
}
)
}
input{width:200px}
.form{width:200px;height:auto;}
.form div{position:relative;top:0;left:0;margin-bottom:5px}
#List1,#List2,#List3{left:0px;top:93px;}
-->
</style>
<script type="text/javascript">
function showAndHide(obj,types){
var Layer=window.document.getElementById(obj);
switch(types){
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str){
var input=window.document.getElementById(obj);
input.value=str;
}
</script>
</head>
<body>
<div class="form">
<div> Location：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
<!--列表1-->
<div class="Menu" id="List1">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt','中國CHINA');showAndHide('List1','hide');">中國CHINA</li>
<li onmousedown="getValue('txt','美國USA');showAndHide('List1','hide');">美國USA</li>
</ul>
</div>
</div>
<div> Sex：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>
<!--列表2-->
<div class="Menu" id="List2">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
<li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
</ul>
</div>
</div>
<div> education：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>
<!--列表3-->
<div class="Menu" id="List3">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">大專</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
<li onmousedown="getValue('txt3','碩士');showAndHide('List3','hide');">碩士</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
</ul>
</div>
</div>
</div><br/>
</body>
</html>

<p align="center"></p>

現在的HTML5支援下拉框輸入，但是對瀏覽器相容比較差，自己用HTML4.0做了一個可輸入的下拉框，推薦給大家。

程式碼如下，實際上就是一個輸入框和一個下拉框組合，輸入框放在下拉框上面，另外可以擴充套件很多，例如要不要帶篩選什麼，這些加一些js程式碼就可以了。

備註一下：右邊的箭頭是自己弄的提個圖片，可以再簡單點的，也就是用預設的箭頭。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>  
      
    <title>無標題文件</title>  
    <script>  
    $(document).ready(function(){  
       $("select").click(function(){  
            var selectinput=this.parentNode;  
            var selectinput_input=$(selectinput).children("input");  
            var selectinput_select=$(selectinput).children("select");  
            selectinput_input.attr("value",selectinput_select.val());  
        });  
    });  
    </script>  
    </head>  
    <style>  
      .selectinput{  
    height:25px;   
    line-height:25px;   
    vertical-align:middle;  
    width: 200px;  
    overflow: hidden;  
    background: url(down_arrow_select.png) no-repeat right #FFFFFF;  
    }  
      
    .selectinput_select{  
       height:25px;  
       width:100%;  
       margin:0;  
       padding:0;  
       font:"宋體" 14px;  
       background: transparent;  
       -webkit-appearance: none;  
    }  
      
    .selectinput_input{  
       position:relative;  
       margin:0;  
       padding:0;  
       top:-23px;  
       left:1px;  
       height:20px;  
       line-height: 20px;  
       border:none;  
       width:20%;  
       font:"宋體" 14px;  
    }  
      
    </style>  
      
    <body>  
    <div class='selectinput' id="test3">  
                   <select  size='1' class="selectinput_select"  >  
                      <option value="test1">test1</option>  
                      <option value="test2">test2</option>  
                      <option value="test3">test3</option>  
                    </select>  
                   <input type='text'  class="selectinput_input"/>  
                </div>  
    </body>  
    </html> 

相關推薦

select下拉框可輸入值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

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

1、原理： 1.1將input輸入框和select框合併在一起，但是顯示出向下點選的按鈕: 這種比較容易做到 1.2出現輸入值能夠自動匹配的功能 動態的載入一個臨時的div出現在該input下方，當點選頁面中的空白地方，div隱藏。 1.3程式碼： <!docty

SELECT input 下拉框可輸入

<div  style="position:relative;width: 170px;height: 28px" > <span style="margin-left:150px;width:18px;overflow:hidden">  

jquery及原生js獲取select下拉框選中的值示例

有一id=test的下拉框，怎麼拿到選中的那個值呢？本文將採用javascript原生的方法及jquery方法（前提是已經載入了jquery庫）來簡單實現下 現在有一id=test的下拉框，怎麼拿到選中的那個值呢？  分別使用javascript原生的方法和jquery方法,程式碼

select下拉框實現輸入功能

select下拉框一般來說只能進行選擇，然而很多應用場景需要支援既能選擇也能輸入的功能。下邊是自己整理的html和js程式碼片段。 <!--HTML片段--> <td> <c:forEach items="${qt009List }" var="list

js獲取select下拉框中的值

現在有一id為userType的下拉框，怎麼獲取選中的值： 1 使用者型別: 2 <select name="type" id="userType"> 3 <option value="0">請選擇</option> 4 <option v

關於HTML中select下拉框的取值問題

<div> <select name="select-test" id="select-test"> <option value="1" >yi</option> <option value="2" >e

jQuery操作select下拉框的text值和value值的方法

1、jquery獲取當前選中select的text值  var checkText=$("#slc1").find("option:selected").text();  2、jquery獲取當前選中select的value值  var checkValue=$("#slc1").val();  3、jqu

jQuery選擇器----------jquery實現select下拉框的取值與賦值，設定選中的方法大全

// 1.判斷select選項中 是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.opt

點選select下拉框裡面的值的事件

點選下拉框用click是沒用的 要用change$("#grjfe").change(function(){var grjfe=$("#grjfe").val();alert(grjfe);//if (grjfe) {////} else{////}})

4種方法獲取select下拉框標簽中的值

定位 tag name () 節點 通過 ext col path 選中下拉框中“上海” 代碼如下：<select id="province" class="select" name="province"> <option value="0">請選擇

Javascript獲取select下拉框選中的的值

title nbsp span htm .text 下拉框 dex alert tle Javascript獲取select下拉框選中的的值 現在有一id=test的下拉框，怎麽拿到選中的那個值呢？ 分別使用javascript原生的方法和jquery方法 <sel

jquery操作select下拉框的多種方法(選中,取值,賦值等

console 多選框 bus move dso rul 調用 define @value http://wenku.baidu.com/link?url=9N4HzvSx12pi4naZfs-Cf7P6MPteTuOoINlfInCJJPr1Tx2QtW7iY_7J_g0

點擊select下拉框獲取option的屬性值

添加 對象 logs 調用 wid cti 渲染 pre con select下拉框作為前端開發者應該是經常使用的，最近在項目中遇到這樣的情況，點擊下拉框選項，需要獲取所點擊的option的屬性值，當時想很簡單啊，給option加一個點擊事件不就行了，然後就加了一下，結果一

jquery操作select下拉框的多種方法(選中,取值,賦值等)

單選框 很多 輸出 checked ref mov define text Language Query獲取Select選擇的Text和Value: 語法解釋： 1. $("#select_id").change(function(){//code...}); //為S

浮動子div撐開父div的幾種方法、給select賦值、zoom樣式的含義、實現select下拉框readonly

disable hid 對象 居中 使用說明 child react back for 1.浮動子div撐開父div的幾種方法： （1）在父div中在添加一個清除浮動的子div<div style=" clear:both;"></div>，該div

select下拉框通過ajax獲取後臺的值

我這兩天一直在寫前端，修改bug，這個問題是真的搞了我一天是時間。鄙人才明白，經驗缺少帶來的時間浪費啊！ 由於網上查詢的資料嚴重誤導了我，在這裡我講個思路大家應該就明白了：        我們下拉框的值是後臺獲取的，其實並不需要點選事件來查詢後臺的值，

element-ui的el-select下拉框獲取值

<el-form ref="form" :model="form" style="width:300px;margin:0 auto;"> <el-form-item label="名字"> <el-select @change="s

bootstrap-select 搜尋下拉框 獲取選中值

<select id="id_reconciliationDate" class="selectpicker show-tick form-control" data-live-search="true" name="reconciliationDate" data-rul

jQuery實現當select下拉框內容變化時，input輸入框內容隨之變化

今天實現了一個功能，當select下拉框中的內容發生變化時，input輸入框中的內容隨之發生變化，具體實現方法如下： //繫結change事件，當下拉框內容發生變化時啟動事件 $("#wlms")