2. 程式人生 > >可選擇和輸入的下拉列表框示例

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

阿新 • • 發佈：2018-12-13

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

相關推薦

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可選擇和輸入的下拉列表框</title&

.net WinForm使用者控制元件開發--(3)可多選的下拉列表框

      這一節給大家演示一個具有多選功能的下拉列表框，其實就是一個文字框和checkboxlist組合實現的使用者控制元件，換個角度來實現自定義控制元件。 先來看下效果圖吧，我會分幾個步驟來具體講解這個文字框的實現。                           

可選擇也可以輸入的下拉列表框

<html><head><title>TW之執行程式碼外掛--Ayin增強版</title><style type="text/css">...div,span,p,td,font{...}{font-size:9pt;}</style>

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

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

MFC 自繪listbox , 自繪ComboBox 下拉列表框 如何設定其列表項的高度和寬度？

自繪ListBox 設定其列表項的高度和寬度可以通過過載虛擬函式 MeasureItem （LPMEASUREITEMSTRUCT lpMeasureItemStruct） 來實現： void CMyComboBox::MeasureItem(LPMEASUREITEMST

jQuery跨裝置和跨瀏覽器的select下拉列表框外掛

sumoselect是一款跨裝置、跨瀏覽器的jQuery下拉列表框外掛。該jQuery下拉列表框外掛可以單選，也可以多選。它的樣式可以通過CSS檔案來自定義。它的最大特點是可以跨裝置使用，所有裝置上功能都是一致的。 該

下拉列表框【安卓3】

pan activity border cin left 資源 pro 內容 1.0 Spinner（下拉列表框） 方法 描述 CharSequence getPrompt () 取得提示文字 void setPrompt(CharSeque

javascript 向下拉列表框select添加選項option

下拉 select cnblogs ntb rip cti 下拉列表框 nbsp span 1 var select= document.getElementById("selectid"); 2 var objOption = document.createElemen

省市區、民族下拉列表框

文字 tro -c 提示信息 ons ati doc nbsp 級聯 省市縣插件PCASClass.js的基本使用方法 <select id="Province" name="Province"></select> <select id="C

jq自定義多選下拉列表框

多選 img 插件 國家 http 分享 class 下拉 blog 多選選擇國家插件 https://gitee.com/richard1015/dropDownList jq自定義多選下拉列表框

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

select 異步加載很多時候，我們寫from表單面，給select標簽賦值，都采用這種方式：1.MVC中設創建公共的分部視圖；2.直接在前臺面中，插入片段後臺代碼；今天我利用HTML5中的自定義屬性，結合JQ擴展方法，寫一個通用的JS方法，JS代碼如下： $.fn.SetSelect = funct

ExtJS4下拉列表框寬度自適應

/** * 獲取下拉列表框定義 */ getBoxTextEditor: function (box_text_store) { //定義了下拉列表框 var editor = new Ext

jqGrid-----顯示下拉列表框

1.jqGrid單元格必須是可編輯狀態。cellEdit : true $('#gridYosan').jqGrid({ data : dataList, datatype : "local", multiboxonly : true, cellEdit : true,

下拉列表框聯動事件 DropList

1.新增onchange事件。 $("#gyomuKbn").on("change", function(){ var currVal = this.value; gyomuKbnChange(currVal); }); 2.觸發被聯動DropList的change事件 fun

jqGrid----下拉列表框下拉聯動，dataEvents回撥函式。

1.給單元格添onchange事件 例項： $('#gridYosan').setColProp('yosanka', {editoptions: { dataEvents:[{ type: 'change', fn: fun

可搜尋多選下拉列表外掛

可搜尋多選下拉列表外掛 參考：http://blog.csdn.net/xb12369/article/details/50999265 <html> <head> <title>jQuery bootstrap-sele

小程式下拉列表框選單

小程式下拉列表框選單 <view class='top'> <view class='top-text'> 選擇班別</view> <!-- 下拉框 --> <view class='top-selected' bin

js解決下拉列表框互斥選項的問題

png hand 問題 列表框 下拉 inf 判斷 要去 發生 如圖不區分選項與其他選項是互斥的關系，當選擇了不區分時，其他選項就要去除，當有其他選項存在時，就不能有不區分 解決辦法：定義change事件，若列表發生改變，首先判斷點擊的是否是不區分，若是，則將其他選項剪切

java-Swing學習(單擊按鈕新增下拉列表框元素)

package test; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.FocusEvent; impor

wxpython自定義下拉列表框

自定義wxpython下拉列表框，支援修改邊框顏色，按鈕圖示的動態變換 原理同前兩片文章一樣，使用了兩個wx.staticText做邊框，一個文字框來顯示下拉列表的資料，和一個圖片按鈕，實現下拉的標誌，和一個自帶的列表框， 影藏該列表框，不要原來的樣式，這裡只需要使用它的展示列表的資料功能