可選擇和輸入的下拉列表框示例

更新時間：2013年11月05日 17:48:30 作者：

如果想實現(xiàn)可選擇和輸入的下拉列表框，那么下面有個不錯的示例，希望大家可以參考下

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>可選擇和輸入的下拉列表框</title> 
<style type="text/css"> 
div,span,p,td,font{font-size:9pt;} 
</style> 
</head> 
<body> 

<table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td align="left"> 
<!--select標簽和input外面的span標簽的格式是為了使兩個位置在同一位置，控制位置--> 
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);"> 
<select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;" 
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;"> 
<!--下面的option的樣式是為了使字體為灰色，只是視覺問題，看起來像是注釋一樣--> 
<option value="" style="color:#c2c2c2;">---請選擇---</option> 
<option value="閑人書庫">閑人書庫</option> 
<option value="閑人BLOG">閑人BLOG</option> 
<option value="閑人設計">閑人設計</option> 
<option value="閑人軟件">閑人軟件</option> 
</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="ccdd" id="ccdd" value="可選擇也可輸入的下拉框" style="width:170px;height:15px;border:0pt;"> 
</span> 

</td></tr></table> 

</body> 

</html> 

注意注釋的位置。

您可能感興趣的文章:

JavaScript編寫實現(xiàn)飛機大戰(zhàn)
這篇文章主要為大家詳細介紹了JavaScript編寫實現(xiàn)飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
js實現(xiàn)磚頭在頁面拖拉效果
這篇文章主要為大家詳細介紹了js實現(xiàn)磚頭在頁面拖拉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
MockJs結合json-server模擬后臺數(shù)據(jù)
這篇文章主要為大家詳細介紹了MockJs結合json-server模擬后臺數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
Typescript協(xié)變與逆變簡單理解
深入學習TypeScript類型系統(tǒng)的話，逆變、協(xié)變、雙向協(xié)變、不變是繞不過去的概念。這些概念看起來挺高大上的，其實并不復雜，這篇文章我們就來學習下協(xié)變和逆變吧
2022-10-10
JS+css 圖片自動縮放自適應大小
編輯器上傳的圖片太大了，把FF和IE撐的走形，所以希望圖片在某些頁面里要有固定大小，如果需要某個范圍，用getElementByname來設定，也是一個道理：
2013-08-08
javascript變量提升和閉包理解
本篇文章給大家詳細分析了javascript變量提升和閉包的相關知識點，對此有興趣的朋友可以參考下。
2018-03-03
詳解微信小程序用定時器實現(xiàn)倒計時效果
這篇文章主要介紹了微信小程序用定時器實現(xiàn)倒計時效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
BootStrap注意事項小結（五）表單
這篇文章主要介紹了BootStrap注意事項小結（五）表單的相關資料，非常不錯，具有參考借鑒價值，,需要的朋友可以參考下
2017-03-03
JavaScript中繼承用法實例分析
這篇文章主要介紹了JavaScript中繼承用法,以實例形式較為詳細的分析了javascript實現(xiàn)繼承的相關技巧,需要的朋友可以參考下
2015-05-05
js定義類的幾種方法(推薦)
下面小編就為大家?guī)硪黄猨s定義類的幾種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06