干貨-HTML中高效獲取下拉菜單select中的值

干貨:HTML中高效獲取下拉菜單select中的值

avaweb

在我們?nèi)粘５膉avaweb開發(fā)過程中呢，會經(jīng)常遇到獲取表單中的下拉菜單中的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();

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

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

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

獲取value: e.value;

我在后續(xù)的文章中，會分享更多更實用的開發(fā)小技巧給大家，希望大家多多關(guān)注！

html 布局
<div class="select dowebok">
    <span class="placeholder">請選擇</span>
    <ul>
        <li>醫(yī)療</li>
        <li>保險</li>
        <li>媒體</li>
        <li>銀行</li>
    </ul>
</div>

css code
.select {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 325px;
    color: #cccccc;
    vertical-align: middle;
    text-align: left;
    user-select: none;
    -webkit-touch-callout: none;
}
.select .placeholder {
    position: relative;
    display: block;
    background-color: #393d41;
    z-index: 1;
    padding: 1em;
    border-radius: 2px;
    cursor: pointer;
}
.select .placeholder:hover {
    background: #34383c;
}
.select .placeholder:after {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
    content: '\f078';
    z-index: 10;
}
.select.is-open .placeholder:after {
    content: '\f077';
}
.select.is-open ul {
    display: block;
}
.select.select--white .placeholder {
    background: #fff;
    color: #999;
}
.select.select--white .placeholder:hover {
    background: #fafafa;
}
.select ul {
    display: none;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    z-index: 100;
}
.select ul li {
    display: block;
    text-align: left;
    padding: 0.8em 1em 0.8em 1em;
    color: #999;
    cursor: pointer;
}
.select ul li:hover {
    background: #4ebbf0;
    color: #fff;
}

JS code
$('.cooperation-topic .select').on('click', '.placeholder', function(e) {
    var parent=$(this).closest('.select');
    if (!parent.hasClass('is-open')) {
        parent.addClass('is-open');
        $('.cooperation-topic .select.is-open').not(parent).removeClass('is-open');
    } else {
        parent.removeClass('is-open');
    }
    e.stopPropagation();}).on('click', 'ul>li', function() {
    var parent=$(this).closest('.select');
    parent.removeClass('is-open').find('.placeholder').text($(this).text());
    parent.find('input[type="hidden"]').val($(this).attr('date-value'));
});
 
$('body').on('click', function() {
    $('.cooperation-topic .select.is-open').removeClass('is-open');
});

表單input：表單是用來收集信息的，由表單控件(表單元素)、提示信息、表單域構(gòu)成。

input控件的屬性及值：

除以上屬性外，input元素type屬性還有一個number屬性值，此為僅可以填數(shù)字，默認(rèn)是可以選擇或者填寫任意數(shù)字，但是當(dāng)type屬性為number屬性值時，可以使用max和min屬性來限制數(shù)字的取值范圍，input更多屬性見HTML5

 <input type="number" min="0"> <!-- min屬性限定最小值為0 -->

label標(biāo)簽：

label標(biāo)簽是為input標(biāo)簽服務(wù)的，用于綁定一個表單元素, 當(dāng)點擊label標(biāo)簽的時候, 被綁定的表單元素就會獲得輸入焦點


    <label> <!-- 1、直接使用label標(biāo)簽包裹要點擊的元素獲得焦點 -->
        姓名：<input type="text">
    </label>
    
    <label for="name">姓名：</label> <!-- 2、使用label標(biāo)簽的for屬性找input元素獲得焦點 -->
    <input id="name" type="text"/>

表單域form：

form元素用于創(chuàng)建一個表單，form中的所有內(nèi)容都會被提交給服務(wù)器;默認(rèn)form標(biāo)簽中需要有一個submit按鈕，如果form里面沒有submit按鈕，那么可以使用button中type屬性為submit的button按鈕，這個buttont按鈕可能不在form表單中，此時可以給type屬性值為submit的button添加form屬性，值為form表單的id值，如：


     <form action="" method="get" name="" id="userform"> <!-- action屬性是指定表單提交給后端的地址，method屬性設(shè)置提交方式，其屬性值有post和get,name屬性用來給表單域定義名字，用于區(qū)分表單域 -->
      姓名：<input type="text">
      年齡：<input type="number" min="0">
    </form>
    <button type="submit" form="userform">提交</button>

文本域textarea：

input元素只能顯示一行內(nèi)容，textarea元素可以顯示多行，一般做留言效果使用，常常被稱為富文本域。


     <!-- rows屬性限定行數(shù)，當(dāng)行數(shù)超過限定后會出現(xiàn)滾動條，cols屬性限定的是列數(shù)，當(dāng)超過限定后會換行。 -->
    <textarea cols="20" rows="10"></textarea>

UEditor：在實際開發(fā)中如果需要用到比較復(fù)雜的富文本域（類似word的，可以上傳視頻圖片等功能）推薦使用第三方插件，這里推薦大家一款使用的富文本插件：UEditor,使用它可以在網(wǎng)頁中實現(xiàn)類似word等編輯，如果想要了解更多及方法請查閱官方文檔：http://fex.baidu.com/ueditor/，當(dāng)然類似的富文本編輯器還有很多，如：CKeditor：https://ckeditor.com/等

富文本編輯器可以自己做，其原理是利用document的execCommand()方法，這個方法實際開發(fā)中很少用，已經(jīng)廢棄，所以一般很少有人了解，如果想要了解更多，可閱讀官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜單)select：


    <body>
        <select name="" id="">
            <optgroup value="" label="分組1"><!-- optgroup標(biāo)簽用來分組 -->>
                <option value="">
                    測試1
                </option>
                <option value="">
                    測試2
                </option>
                <option value="">
                    測試3
                </option>
            </optgroup>
            <optgroup value="" label="分組2">
                <option value="">選項1</option> <!-- select默認(rèn)選擇第一個option，當(dāng)給option加selected屬性時，則會選中此項顯示 -->
                <option value="" selected="selected">選項2</option> <!-- selected屬性的selected屬性值可以省略，其效果不變-->
                <option value="">選項3</option>
            </optgroup>
          </select>
    </body>

塊引用標(biāo)簽：

有的時候會引用名人名言等，此時建議使用引用標(biāo)簽，引用標(biāo)簽分為長引用和短引用兩種，長引用標(biāo)簽效果是插入換行和外邊距，短引用標(biāo)簽的效果是加上虛擬的引號。


    <blockquote>海上生明月，天涯共此時。</blockquote><!-- 長引用標(biāo)簽 -->
    
    <q>引號</q><!-- 段引用會給內(nèi)容加上虛擬的引號，這個引號根本不存在。 -->

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

在線咨詢

上一篇：高考錄取期間，考生須注意這十件事
下一篇：一種手機屏幕轉(zhuǎn)文字的OCR技術(shù)方案

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

干貨-HTML中高效獲取下拉菜單select中的值

您的項目需求