前端實現帶輸入框的下拉菜單

現帶輸入框的下拉菜單，方便用戶在搜索時候可以根據歷史記錄快速定位自己要搜索的關鍵詞！

效果如下：

實現代碼：

html:

css:

javascript：

天是十一，祝大家十一快樂，偉大的國家建黨百年，萬歲萬歲萬歲！

之前講了input表單控件，今天繼續說下select下拉表單元素控件。使用場景:在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，可以使用<select>標簽控件定義。

我們來看下<select>表單元素的語法:

...

</select>

接下來看看實例:

可以看到這是一個下拉菜單，接著我們看看代碼實現

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

籍貫:

</select>

</body>

</html>

可以看到，代碼還是很簡單的。一般下拉控件都是在表單中的，所以需要加上

<form>標簽

看著沒什么變化，看看代碼:

<body>

<form>

籍貫:

</select>

</form>

</body>

<body>中增加了<form>表單

接著說下<select>里的一些規則:

<select>中至少包含一對<option>
在<option>中定義 <option selected="selected">時，當前項即為默認選擇項。

可以看下效果，我們選擇山西作為默認選擇項。

看看代碼，就是添加了 selected屬性

接下來，我們看下表單元素中最后一個， textarea文本域元素

使用場景:

當用戶輸入內容較多的時候，就不能使用文本框表單了，需要使用 texttarea文本域 <textarea>標簽，用于定義多行文本輸入的控件。對應的語法為:

文本內容

</textarea>

</select>

我們來看下效果:

可以看到有一個可以輸入的框，一般在框中都有預先寫好的內容，比如請輸入反饋

對應代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<form>

今日反饋:

請輸入您寶貴的意見

</textarea>

</form>

</body>

</html>

做個小總結:

1. 通過<textarea>標簽可以輕松地創建多行文本輸入框

2. cols="每行中的字符數" rows="顯示的行數" 在實際開發中不會使用，一般都是用css來控制樣式

來看下實際效果:

可以看到漢字最多輸入10個，可以輸入多行，但是在數據框當前頁面展示了3行，如果是可以展示5行呢？

頁面展示5行了，這塊不要理解為只能顯示N行。

看下對應的代碼:

<form>

今日反饋:

<textarea cols="20" rows="5">請輸入您寶貴的意見

</textarea>

</form>

好的，今天就先到這里

更多好文章，可以關注微信公眾號 "蛋蛋雜談"

avaweb

在我們日常的javaweb開發過程中呢，會經常遇到獲取表單中的下拉菜單中的value以及他的text，下面我來教大家兩種方法。（推薦第二種哈~，希望大家多多評論點贊呀，上一篇文章中，各位猿媛光想著收藏，都看不到你們給我寫的評論，桑心~~）

假如我們的select長這樣：

<select id="myselect">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

第一種呢是用我們比較常見的JQuery

var $selected=$("#myselect option").filter(":selected");

獲取文本： $selected.text();

獲取value: $selected.val();

第二種呢當然是我們的原生js啦~~（推薦喲，收藏評論哈~）

var e=document.getElementById("myselect");

獲取文本：var text=e.options[e.selectedIndex].text;

獲取value: e.value;

我在后續的文章中，會分享更多更實用的開發小技巧給大家，希望大家多多關注！

在線咨詢

上一篇：辦公小技巧：杜絕意外讓字體永不丟失
下一篇：不合群有什么好處？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端實現帶輸入框的下拉菜單

您的項目需求