bootstrap可以输入的下拉框

最新推荐文章于 2023-03-14 14:29:45 发布

darer49

最新推荐文章于 2023-03-14 14:29:45 发布

阅读量4.7k

点赞数 3

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/darer49/article/details/118345658

版权

本文介绍如何使用HTML与JavaScript创建一个带有默认值且能在获得焦点时清空内容的输入框，适用于设置选项如新能源车占比等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<label class="input-group-text" for="test">新能源车占比</label>
<input type="text" class="form-control"  list="test" id="test2" value='0.3' onfocus="this.value=''">
<datalist id="test">
    <option value="0.3">0.3</option>
    <option value="0.2">0.2</option>
    <option value="0.1">0.1</option>
</datalist>

<script>
    //获取输入框的值
    console.log($("#test2").val());
</script>

做可以输入的下拉框只需要有input和datalist就可以了。

为了好看加了个label。

但是我这里需要有默认值，需要在点击的时候内容清空，所以加了默认的value和onfocus聚焦事件。

效果是这样的：