整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

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

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

          效果如下:

          實現代碼:

          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>里的一些規則:

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

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

          看看代碼,就是添加了 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;

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


          主站蜘蛛池模板: 亚洲av无码片区一区二区三区| 波多野结衣一区二区免费视频| 精品无码人妻一区二区免费蜜桃| 亚洲熟妇无码一区二区三区| 日韩精品人妻一区二区中文八零 | 无码毛片视频一区二区本码 | 国产成人精品一区二区三区| 国产精品一区视频| 丝袜人妻一区二区三区| 亚洲AV日韩精品一区二区三区| 香蕉久久ac一区二区三区| 亚洲欧洲日韩国产一区二区三区| 3d动漫精品啪啪一区二区中| 久久久久人妻精品一区蜜桃 | 国产伦精品一区二区三区在线观看 | 亚洲一区免费观看| 在线精品国产一区二区三区| 国产99精品一区二区三区免费| 国产亚洲综合精品一区二区三区| 日韩一区二区三区不卡视频| 免费高清av一区二区三区| 免费一区二区视频| 一区二区三区四区电影视频在线观看 | 成人无码AV一区二区| 国产视频一区二区在线播放| 国产精品视频一区二区噜噜 | 一区二区免费在线观看| 一区二区三区免费高清视频| 国产精品视频一区二区三区不卡| 中文字幕日韩一区二区三区不 | 成人区人妻精品一区二区三区| 无码一区二区三区爆白浆| 国内精品视频一区二区三区| 日本精品少妇一区二区三区| 久久久久人妻一区精品| 精品无码国产一区二区三区AV | 国产一区二区女内射| 久久一区二区明星换脸| 亚洲熟妇AV一区二区三区浪潮| 女人18毛片a级毛片一区二区| 人妻无码一区二区三区|