select实现placeholder效果

最新推荐文章于 2024-08-08 13:46:49 发布

杰~JIE

最新推荐文章于 2024-08-08 13:46:49 发布

阅读量1.7w

点赞数 3

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_44869002/article/details/103936519

版权

前端专栏收录该内容

8 篇文章 2 订阅

订阅专栏

前言

一般的表单控件有一个placeholder的属性，但是select却没有该属性。下面给大家带来一个实现select的placeholder的方法。

代码

html

  <select class="city" onchange="select()">
    <option disabled selected value>- 请选择城市</option>
    <option value hidden>重置</option>
    <option value="北京">北京</option>
    <option value="广州">广州</option>
    <option value="广州">深圳</option>
    <option value="湛江">湛江</option>
  </select>

JavaScript

function select(){
    const select = document.querySelector('.city');
    const reset = document.querySelector('.city option:nth-child(2)');
    const select_index = select.selectedIndex;
    if(select_index === 1){
      reset.style.display = 'none';
      select.options[0].selected = true;
    }else{
      reset.style.display = 'block';
    }
  }

效果

初始状态
初始状态展开
选择
选择后再次展开
点击“重置”

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .city{
    width: 200px;
    height: 32px;
  }
  </style>
</head>
<body>

  <select class="city" onchange="select()">
    <option disabled selected value>- 请选择城市</option>
    <option value hidden>重置</option>
    <option value="北京">北京</option>
    <option value="广州">广州</option>
    <option value="广州">深圳</option>
    <option value="湛江">湛江</option>
  </select>

  <script>
  function select(){
    const select = document.querySelector('.city');
    const reset = document.querySelector('.city option:nth-child(2)');
    const select_index = select.selectedIndex;
    if(select_index === 1){
      reset.style.display = 'none';
      select.options[0].selected = true;
    }else{
      reset.style.display = 'block';
    }
  }
  </script>
</body>
</html>