今天在公司里，遇到了一个很简单的问题，有一个UI样式固定的下拉列表框。当我拿到这个ui的时候，第一感觉就是简单的select标签就可以解决问题，但是后面在改样式的过程中，遇到了许许多多的问题，包括无法修改选中后默认的蓝色框，option的hover无法改变等等。。。

在许多次尝试失败后，我决定，定义一个属于自己的下拉列表，当然啦，我并不想用那些组件，虽然用组件很快吧，但是当一个项目中用的组件多了以后，总是会出现好多不可控的因素，相信在座的大牛都比我懂的多，那就开始这次体验吧~~

效果图：

嗯。。学了半天gif图还是不会，等小编以后再补上图，后面有源码，大家直接复制即可。。

理一下思路：

• 通过ul li 俩标签的形式来定义这个列表 显然li中一开始是隐藏的
• li 标签下的就是我们的标签
• ul 标签下我会定义一个div 用来装”请选择一个标签” 之类的默认选项
• 在div 中分为两块 span 和 img
• span 就是文字”请选择一个标签”
• img 则是向下向上的图标
• 点击后，图标会变 span会变 div的边框会变 当然你也可以随意为li（你的标签）添加一些hover样式

因为公司项目中有jquery，所以有部分jquery的代码，当然你想用js原生实现也可以哦
好了，就那么简单，让我们来写一次自己的组件吧

html代码

<ul class="dropdown" tabindex="1">
        <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
        <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
            <span>请选择标签</span>
            <div class="dp-img">
                <img src="images/dp-down.png" width="15" height="20">
            </div>
        </div>

        <li class="dp-list hide">标签一</li>
        <li class="dp-list hide">标签二</li>
        <li class="dp-list hide">标签三</li>
        <li class="dp-list hide">标签四</li>
</ul>

简单分析下上述代码，ul，li 结构 下面分为一个<div>和若干个<li>标签。
<div class="dp-select">下有一个<span>用来装默认标签文字，还有一个<div class="dp-img">用来放最右边那个向上和向下的小图标。
<li>就是各位一个个的标签啦，我给它定义了一个‘dp-list’的样式
html就只有那么多了，接下来让我们看看css

css代码

<style>
    .dropdown{
        width: 150px;
        height: 30px;
        line-height: 30px;
        padding:0px;
        cursor: pointer;
        outline: 0;
        border:1px solid #8a8a8a;
    }
    .dropdown .dp-list{
        list-style: none;
        width: 150px;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #8a8a8a;
        border-right: 1px solid #8a8a8a;
        border-bottom: 1px solid #8a8a8a;
        position: relative;
        left: -1px;

    }
    .dropdown .dp-list:hover{
        background: #8a8a8a;
        color: #ffffff;
    }
    .dropdown .dp-img{
        float: right;
        width: 20px;
        height: 30px;
        display: flex;
        justify-content:center;
        align-items:center;
        border-left: 1px solid #8a8a8a;
    }
    .hide {
        display: none;
    }
</style>

css属实没啥好说的，dp-img 也就是我放图标的那个小div,我这里采用的是flex布局，让图标居中。
当然，如果你们想用background使图标居中也没问题啦，个人习惯而已~
hide是我定义的一个隐藏li标签的样式，为了让js代码写的少一些。如果不想写，在js中改成display：none 就可以咯

js代码

<script type="text/javascript">
    $('.dropdown .dp-select').on('click',function(){
        if($('.dropdown li').hasClass('hide')){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-up.png');
            //显示li标签
            $('.dropdown li').removeClass('hide');
            //加点点击样式
            $('.dropdown').css('border','1px solid lightblue');
            $('.dropdown .dp-img').css('border-left','1px solid lightblue');
        }else{
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        }
    });
    //点击li 标签后发生的事件
    $('.dropdown li').on('click',function(){
        var text = $(this).text();
        console.log(text);
        $('.dp-select span').text(text);
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');

    });
    //失去焦点发生的事件
    $('.dropdown').blur(function(){
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    });
</script>

终于看到js了，其实可以发现js代码并不多，好吧，我承认，我写的还是比较冗余的。
如果精简下的话可能会更少哦！

pass:这里我用jquery的，不喜欢用jquery的话，可以自己去把其中一些方法替换成js原生~

第一个方法，为dp-select元素添加了click事件。
解释下，就是你点默认的那个框的时候，下面的li标签会显示，图标img（就是一开始是向上的图标）你点了以后，就会换成向下的图标。
jquery.css是我自己加的一些样式，大家可以自己修改。

第二个方法，给li标签的点击事件，很简单，点击以后替换span中的text值，其他跟上面方法一样，换图标，换样式。。

第三个方法，这是感觉最有意思的一个方法了，给div添加blur方法。
因为我们都知道，一个下拉列表框，你在不属于它的地方点击后，应该会缩回去吧。
为了实现这个效果，我采用给最大的ul标签添加tabindex=“1”
这样ul标签就可以跟input框一样，使用blur,focus`等等方法了。
失去焦点后，自然是隐藏li 修改样式，修改图标。

差不多介绍完啦，第一次写博客，很菜。大家在实践过程中会发现ul标签是不是显得没有那么必要？
当然每一个自己写的小东西需要不停地去优化，以前我用过无数组件，但是自己写一个很小很小的组件的时候，也会发现好多的问题。需要与大家共勉。

对于以上写的下拉列表，接下来需要考虑的就是封装了。

如果可以这样子调用我们的自己定义的下拉列表框，会不会很酷？

<ul class="dp-default my-dark">
        请选择标签
        <li class="dp-list">标签一</li>
        <li class="dp-list">标签二</li>
        <li class="dp-list">标签三</li>
        <li class="dp-list">标签四</li>
</ul>

小结

这样子，感觉像自己创建一个组件一样。下一篇会详细讲讲如何将自己写出来的小东西，再更加进一步的封装，其中还包括对html元素进行封装等等。

就到这里吧，附上源码。希望能有更多的机会跟大家交流~

源码

注意：有俩个图标在 大家可以直接另存为这两张图
Jquery的话。。自己在网上找一个jquery.js就好了！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <!--  img  #8a8a8a -->
    <style>
        .dropdown{
            width: 150px;
            height: 30px;
            line-height: 30px;
            padding:0px;
            cursor: pointer;
            outline: 0;
            border:1px solid #8a8a8a;
        }
        .dropdown .dp-list{
            list-style: none;
            width: 150px;
            height: 30px;
            line-height: 30px;
            border-left: 1px solid #8a8a8a;
            border-right: 1px solid #8a8a8a;
            border-bottom: 1px solid #8a8a8a;
            position: relative;
            left: -1px;

        }
        .dropdown .dp-list:hover{
            background: #8a8a8a;
            color: #ffffff;
        }
        .dropdown .dp-img{
            float: right;
            width: 20px;
            height: 30px;
            display: flex;
            justify-content:center;
            align-items:center;
            border-left: 1px solid #8a8a8a;
        }
        .hide {
            display: none;
        }
    </style>

</head>
<body>
    <ul class="dropdown" tabindex="1">
        <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
        <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
            <span>请选择标签</span>
            <div class="dp-img">
                <img src="images/dp-down.png" width="15" height="20">
            </div>
        </div>

        <li class="dp-list hide">标签一</li>
        <li class="dp-list hide">标签二</li>
        <li class="dp-list hide">标签三</li>
        <li class="dp-list hide">标签四</li>
    </ul>


    <ul class="dp-default my-dark">
        请选择标签
        <li class="dp-list">标签一</li>
        <li class="dp-list">标签二</li>
        <li class="dp-list">标签三</li>
        <li class="dp-list">标签四</li>
    </ul>
</body>     
</html>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
    $('.dropdown .dp-select').on('click',function(){
        if($('.dropdown li').hasClass('hide')){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-up.png');
            //显示li标签
            $('.dropdown li').removeClass('hide');
            //加点点击样式
            $('.dropdown').css('border','1px solid lightblue');
            $('.dropdown .dp-img').css('border-left','1px solid lightblue');
        }else{
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        }
    });
    失去焦点发生的事件
    $('.dropdown').blur(function(){
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    });
    点击li 标签后发生的事件
    $('.dropdown li').on('click',function(){
        var text = $(this).text();
        console.log(text);
        $('.dp-select span').text(text);
        //点击后更改图标
        $('.dp-img img').attr('src','images/dp-down.png');
        //显示li标签
        $('.dropdown li').addClass('hide');
        //继续点击样式
        $('.dropdown').css('border','1px solid #8a8a8a');
        $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');

    });
</script>

标签介绍

form标签：用于表单类型的标签。
select标签：一般和form标签连用，实现下拉框作用。
option标签：一般要嵌套在select标签里面，用于实现选项。
textarea标签：用来实现文本框的标签。

select标签的属性：

前面提到了select标签要写在form表单里面，而select标签里面要嵌套option标签用来实现选项。
multiple属性：写入这个属性时选项框不折叠起来，如下代码及运行：

<form>
	<select multiple="multiple">
			<option></option>
			<option>奥特曼</option>
			<option>奥特曼1</option>
			<option>奥特曼2</option>
	</select>
</form>

如果不写multiple这个属性则默认折叠，运行结果如下：

<form>
	<select>
			<option></option>
			<option>奥特曼</option>
			<option>奥特曼1</option>
			<option>奥特曼2</option>
	</select>
</form>

textare标签的属性

1，cors属性：表示文本框的列数。
2，rows属性：表示文本框的行数。
可以自行修改参数，并且这个文本框可以手动拉大拉小。
写法如下：

<form>
		<textarea cols="5" rows="5">
			这是文本框
		</textarea>
</form>

注意和form标签连用。

你学费了吗

html：

<nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="gradeNo">年级</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-select (click)="searchGradeList()" [(ngModel)]="grade" formControlName="gradeNo" id="gradeNo" [nzSize]="size"
                nzPlaceHolder="请选择年级" nzShowSearch>
                <nz-option *ngFor="let option of gradeListOfOption" [nzLabel]="option.name" [nzValue]="option.code"></nz-option>
              </nz-select>
            </nz-form-control>
</nz-form-item>

ts：

searchGradeList() {
    this.gradeListOfOption = [{ name: '大一', code: '1' },
    { name: '大二', code: '2' },
    { name: '大三', code: '3' },
    { name: '大四', code: '4' }];
  }

显示结果：