下拉框 select-option與datalist的區別

select option

下拉框只能下拉選擇存在的值, 不能本身輸入.

<select>
        <optgroup label="國內">
            <option value="gz">廣州</option>
            <option value="sz">深圳</option>
            <option value="bj" selected>北京</option>
        </optgroup>
        <optgroup label="國外">
            <option value="ld">倫敦</option>
            <option value="ny">紐約</option>
            <option value="xn">悉尼</option>
        </optgroup>
    </select>
複製代碼

datalist

用戶能夠本身輸入, 能夠自動匹配. value的值也與select option方法有區別.

<input type="text" list="city1">
    <datalist id="city1">
        <option value="gz">廣州</option>
        <option value="sz">深圳</option>
        <option value="bj">北京</option>
    </datalist>


    <br>
    <!--簡寫-->
    <input type="text" list="city2">
    <datalist id="city2">
        <option value="廣州">
        <option value="深圳">
        <option value="北京">
    </datalist>
複製代碼