select实现placeholder效果

前言

一般的表单控件有一个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';
    }
  }

效果

  1. 初始状态
    在这里插入图片描述
  2. 初始状态展开
    select实现placeholder效果_第1张图片
  3. 选择
    在这里插入图片描述
  4. 选择后再次展开
    select实现placeholder效果_第2张图片
  5. 点击“重置”
    在这里插入图片描述
    select实现placeholder效果_第3张图片
    全部代码如下:

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

你可能感兴趣的:(前端,html5)