快捷導(dǎo)航

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

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

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

 
<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標(biāo)簽和input外面的span標(biāo)簽的格式是為了使兩個(gè)位置在同一位置，控制位置--> 
<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的樣式是為了使字體為灰色，只是視覺(jué)問(wèn)題，看起來(lái)像是注釋一樣--> 
<option value="" style="color:#c2c2c2;">---請(qǐng)選擇---</option> 
<option value="閑人書(shū)庫(kù)">閑人書(shū)庫(kù)</option> 
<option value="閑人BLOG">閑人BLOG</option> 
<option value="閑人設(shè)計(jì)">閑人設(shè)計(jì)</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> 

注意注釋的位置。

您可能感興趣的文章:

相關(guān)文章

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