整合營銷服務商

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

          免費咨詢熱線:

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

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

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

          效果如下:

          實現代碼:

          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;

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


          主站蜘蛛池模板: 精品在线视频一区| 99精品国产高清一区二区麻豆| 亚洲国产精品一区二区久| 国产福利一区二区三区在线视频| 一区二区和激情视频| 日本夜爽爽一区二区三区| 精品一区二区三区在线视频| 亚洲国产一区二区a毛片| 无码人妻精品一区二区三区9厂| 麻豆精品一区二区综合av| 国产一区视频在线| 精品国产福利在线观看一区| 福利一区国产原创多挂探花| 久久91精品国产一区二区| 无码人妻精品一区二区三区9厂 | 精品乱码一区二区三区四区| 国产一区美女视频| 亚洲国产国产综合一区首页| 国产精品一区在线播放| 欧洲精品码一区二区三区免费看| 日韩一区二区超清视频| 国产精品亚洲不卡一区二区三区| 麻豆一区二区三区蜜桃免费| 国产日韩精品一区二区在线观看播放| 久久亚洲日韩精品一区二区三区| 国精无码欧精品亚洲一区| 国产在线观看一区二区三区精品| 国产精品福利区一区二区三区四区| 一区二区三区在线视频播放| 国产精品成人国产乱一区| 国产91一区二区在线播放不卡| 无码精品人妻一区二区三区影院 | 无码人妻精品一区二区三区久久 | 97se色综合一区二区二区| 一区二区三区在线| 中文字幕无码不卡一区二区三区| 国产成人无码AV一区二区| 无码一区二区三区亚洲人妻| 亚洲国产视频一区| 日韩精品一区二区三区四区 | 一区二区三区日本电影|