下拉框 select-option与datalist的区别

小咪咪 2022-10-11 15:55 30阅读 0赞

## 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>

![在这里插入图片描述][20210701183033787.png]

## 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>

![在这里插入图片描述][20210701183222383.png]

![在这里插入图片描述][20210701183204860.png]

[20210701183033787.png]: /images/20221005/19555442bf834f92a69fc6bda0c7e61c.png
[20210701183222383.png]: /images/20221005/15870baf352246d78c965bbf32137c45.png
[20210701183204860.png]: /images/20221005/14ad918a537b4cf49558ef6eb114a76f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关下拉框 select-option与datalist的区别

select option 下拉框只能下拉选择存在的值, 不能自己输入. <select> <optgroup label="国内">

小咪咪/ 2022年10月11日 15:55/ 0 赞/ 31 阅读

相关 html5 中新的datalist 自动下拉提示输入框

在日常的页面制作中，为了方便用户输入，经常可以在一个输入文本框中，当用户输入内容时，自动下拉提示建议用户的输入，这叫autocomplete或者autosuggestio

川长思鸟来/ 2022年08月19日 13:12/ 0 赞/ 240 阅读

相关 Extjs 下拉框

刚刚熟练了easyui控件的使用，又开始了现在的这个项目。这个项目是个半成品，前端使用的是Extjs控件，jsp中没有代码，就引用了很多的js。。。于是乎有种不知所措了呀。

末蓝、/ 2022年08月12日 02:59/ 0 赞/ 282 阅读

相关初始化下拉框

1. /\\ 2. \ 初始化下拉框 3. \ 4. \ @param par 父控件 5. \/ 6.

小灰灰/ 2022年08月08日 06:17/ 0 赞/ 234 阅读

相关 React 用input和datalist写的下拉框

效果如图所示： ![Center][] 输入会有提示： ![Center 1][] 代码如下： class Suggest extends Rea

﹏ヽ暗。殇╰゛Y/ 2022年06月09日 08:42/ 0 赞/ 225 阅读

相关单个下拉框取值与多个下拉框取值

下拉框的基本知识: 下拉框不支持onclick事件，onclick事件在鼠标点击下拉框还没有进行选择操作时就会触发；要取出选项框的值一般使用change事件。

向右看齐/ 2022年05月31日 00:43/ 0 赞/ 291 阅读

相关 Android 下拉框

Android 下拉框的使用方法直接上代码 <Spinner android:id="@+id/spinner" android:layout_width="100

超、凢脫俗/ 2022年05月22日 12:58/ 0 赞/ 522 阅读

相关用input做的下拉框，可编辑的下拉框

<input type="text" list="itemlist" name=""> <datalist id="itemlist"> <option>item1</op

傷城~/ 2022年05月22日 05:13/ 0 赞/ 287 阅读

相关 select与datalist在制作下拉菜单时的区别

原文出处：[https://blog.csdn.net/Doulvme/article/details/53941114][https_blog.csdn.net_Doulvm

曾经终败给现在/ 2022年05月08日 10:18/ 0 赞/ 141 阅读

相关下拉框

1.jsp: <select class=" z9" name="sstage" id="sstage"> <c:forEach items="$\{sstagelis

比眉伴天荒/ 2021年11月23日 03:28/ 0 赞/ 486 阅读