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

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

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

http://img1.sycdn.imooc.com//climg/5d1b447b0001abd205130401.jpg

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

正在回答

登陆购买课程后可参与讨论,去登陆

4回答

同学你好!

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

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

http://img1.sycdn.imooc.com//climg/5d1d9fb60001acb808830469.jpg

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

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

同学你好!

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

http://img1.sycdn.imooc.com//climg/5d1c357f0001e01205070356.jpg

http://img1.sycdn.imooc.com//climg/5d1c35870001d1eb01800168.jpghttp://img1.sycdn.imooc.com//climg/5d1c358f00017df801740115.jpg

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

http://img1.sycdn.imooc.com//climg/5d1c35ed0001fc3f03980135.jpg

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

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

  • 但是,视频中老师和我写的一样,但是不会显示value啊
    2019-07-03 15:35:35
  • 视频中老师把value和标签中内容写的是一样的,但是同学value和标签中内容写的不一样哦,同学可以看下~ 如果帮助到了你 欢迎采纳 祝学习愉快~
    2019-07-03 18:04:12
  • 怎么可能一样,老师你看看视频啊,中文英文肯定不一样怎么会一样
    2019-07-04 14:25:25
好帮手慕码 2019-07-03 10:06:04

同学你好!

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

http://img1.sycdn.imooc.com//climg/5d1c0d4c000124ab04920134.jpg

http://img1.sycdn.imooc.com//climg/5d1c0d550001634602600238.jpg

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

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

  • 我猜到浏览器版本的影响,之前也是这样,没有问题,这次就出现这个问题,请问有没有除了设置value和内容一样之外的方法防止这个问题出新
    2019-07-03 10:43:29
o0oi1i 2019-07-02 22:09:46

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


  • 我也是醉了,对着视频看一下你说是不是一样的。。。。。
    2019-07-03 08:34:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师