老师，为什么我的代码一模一样，结果却有点诡异

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
</head>
<body>
    <input placeholder="请选择您喜欢的手机品牌" list="phoneList">
    <datalist id="phoneList">
        <option value="iPhone">iPhone</option>
        <option value="Samsung">三星</option>
        <option value="Huawei">华为</option>
        <option value="Xiaomi">小米</option>
        <option value="htc">HTC</option>
    </datalist>
</body>
</html>

为什么我的这个下拉列表把value的值都给显示出来了？

不会敲代码的小浩子 2019-07-02

源自：HTML5标签变化 3-16 列表标签

5

收起

4回答

好帮手慕码回答被采纳获得+3积分 2019-07-04 14:44:05

同学你好！

视频中和同学写的确实不一样，所以效果显示不同

（在datalist中如果option的value和标签中间内容写不一样，确实都是会显示出来的。如果写的一样，只会显示一个）

如果帮助到了你欢迎采纳祝学习愉快~

好帮手慕码 2019-07-03 12:59:32

同学你好！

刚刚回答的有一些问题，这里是datalist下的option，与select是有些不同的，select显示的是标签中内容

datalist下的option中的value和标签内容都是会显示的。datalist下的option一般书写方式是：

或者是标签中内容和value一样的

如果帮助到了你欢迎采纳祝学习愉快~

提问者不会敲代码的小浩子 #1

但是，视频中老师和我写的一样，但是不会显示value啊

2019-07-03 15:35:35
好帮手慕码回复提问者不会敲代码的小浩子 #2

视频中老师把value和标签中内容写的是一样的，但是同学value和标签中内容写的不一样哦，同学可以看下~ 如果帮助到了你欢迎采纳祝学习愉快~

2019-07-03 18:04:12
提问者不会敲代码的小浩子回复好帮手慕码 #3

怎么可能一样，老师你看看视频啊，中文英文肯定不一样怎么会一样

2019-07-04 14:25:25

好帮手慕码 2019-07-03 10:06:04

同学你好！

是这样的，可能是现在浏览器版本的问题。如果value和内容不一样的时候会都显示出来。如果value和内容一致，则显示一个

一般情况下，会将value和内容写成一致的方便辨识。

如果帮助到了你欢迎采纳祝学习愉快~

提问者不会敲代码的小浩子 #1

我猜到浏览器版本的影响，之前也是这样，没有问题，这次就出现这个问题，请问有没有除了设置value和内容一样之外的方法防止这个问题出新

2019-07-03 10:43:29

o0oi1i 2019-07-02 22:09:46

结果说明代码可不是一模一样的唷！

提问者不会敲代码的小浩子 #1

我也是醉了，对着视频看一下你说是不是一样的。。。。。

2019-07-03 08:34:24

相似问题

老师，为什么我的结果和视频的不一样

报错了为什么我的什么也没显示跟老师的不一样是什么回事

这段css代码的line-height:73px;结果不一样啊

老师，我这个为什么执行不出来

老师关于异步最后的一点疑问

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号