整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
現帶輸入框的下拉菜單，方便用戶在搜索時候可以根據歷史記錄快速定位自己要搜索的關鍵詞！
效果如下：
實現代碼：
html:
css:
javascript：
天是十一，祝大家十一快樂，偉大的國家建黨百年，萬歲萬歲萬歲！
之前講了input表單控件，今天繼續說下select下拉表單元素控件。使用場景:在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，可以使用<select>標簽控件定義。
我們來看下<select>表單元素的語法:
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
...
</select>
接下來看看實例:
可以看到這是一個下拉菜單，接著我們看看代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
籍貫:
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>河北</option>
<option>河南</option>
<option>東北</option>
<option>陜西</option>
<option>山西</option>
</select>
</body>
</html>
可以看到，代碼還是很簡單的。一般下拉控件都是在表單中的，所以需要加上
<form>標簽
看著沒什么變化，看看代碼:
<body>
<form>
籍貫:
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>河北</option>
<option>河南</option>
<option>東北</option>
<option>陜西</option>
<option>山西</option>
</select>
</form>
</body>
<body>中增加了<form>表單
接著說下<select>里的一些規則:
可以看下效果， 我們選擇山西作為默認選擇項。
看看代碼，就是添加了 selected屬性
<option selected="selected">山西</option>
接下來，我們看下表單元素中最后一個， textarea文本域元素
使用場景:
當用戶輸入內容較多的時候，就不能使用文本框表單了，需要使用 texttarea文本域 <textarea>標簽，用于定義多行文本輸入的控件。對應的語法為:
<select>
<textarea rows="3" cols="20">
文本內容
</textarea>
</select>
我們來看下效果:
可以看到有一個可以輸入的框，一般在框中都有預先寫好的內容，比如 請輸入反饋
對應代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋:
<textarea>
請輸入您寶貴的意見
</textarea>
</form>
</body>
</html>
做個小總結:
1. 通過<textarea>標簽可以輕松地創建多行文本輸入框
2. cols="每行中的字符數" rows="顯示的行數" 在實際開發中不會使用，一般都是用css來控制樣式
來看下實際效果:
可以看到漢字最多輸入10個，可以輸入多行，但是在數據框當前頁面展示了3行，如果是可以展示5行呢？
頁面展示5行了，這塊不要理解為只能顯示N行。
看下對應的代碼:
<form>
今日反饋:
<!--每行最多輸入20個字符，最多展示3行-->
<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小時內與您取得聯系。
