虽然面试的时候是说自己想专注于java后台开发，但开发过程中肯定也会有种种其它问题需要去解决嘛。这不，项目经理说要在一个下拉框中放一个X的Y次方这类的数据。尝试发现原生的下拉框select中使用<sup>标签并不起作用。虽然我对前端的东西并不是很熟，但是程序猿不能说不！即使要根据心情来改变主题这种需求也要想办法去解决！所以呢自己就鼓捣出来了一个还算能用的自定义下拉框。仅供参考。

一、最终效果

即可以在下拉选项中使用样式，也可以将自己需要的内容放至下拉选项中。

(刚使用的gif图制作工具，分享一波：gif图制作小工具)

二、实现步骤

2.1 设置自定义下拉框的样式

<style type="text/css">
  .mySel{position:relative; background: #fff;}
  .mySel cite{ width: 120px; padding-left:4px; display:block; color:#575757; cursor:pointer;font-style:normal; border:1px solid #E4E4E4;border-left: 1px solid #ccc;border-top: 1px solid #ccc;}
  .mySel ul{width:124px; height:130px; display:none; /*overflow-y:scroll;*/ border:1px solid #E4E4E4; background-color:#ffffff; position:absolute;margin-top:-1px;margin:0px;padding:0px;list-style:none;}
  .mySel ul li{padding-left:4px;line-height:25px;}
  .mySel ul li a{display:block; color:#333333; text-decoration:none;}
  .mySel ul li a:hover{background-color:#1277D3;color:white;}
</style>

2.2 定义我们的下拉框内容

自定义内容放在 li 标签下的 a 标签中

<span id="mySelect" class="mySel">
    <cite>请选择</cite>
    <ul>
        <li><a href="javascript:;"  ><span>请选择</span></a></li>
        <li><a href="javascript:;"  ><span style="color: red;">自定义内容1</span></a></li>
        <li><a href="javascript:;"  ><span>自定义内容2</span></a></li>
        <li><a href="javascript:;"  ><span>自定义内容3</span></a></li>
        <li><a href="javascript:;"  ><span>我<sup>你</sup></span></a></li>
     </ul>
</span>

2.3 定义js实现点击出现下拉和获取选项

<script type="text/javascript">
    /*点击弹出和取消下拉内容*/
    $("#mySelect cite").click(function(event) {
      event.stopPropagation();
      $(this).siblings('#mySelect ul').toggle();
       var tag = $(this).siblings('#mySelect ul');
        var flag = true;
        $(document).bind("click",function(e){//点击空白处，设置的弹框消失
          var target = $(e.target);
          if(target.closest(tag).length == 0 && flag == true){
            $(tag).hide();
            flag = false;
          }
        });
    });

    /*选择下拉内容并收起*/
    $("#mySelect ul li a").click(function(){
      var b_1 = $(this).html();
      $("#mySelect cite").html(b_1);
      $("#mySelect ul").css("display","none");
    });
</script>

总结：上面三步之后即可使用自己定义的下拉框。需要注意的是需要用到 jquery 的。并且该自定义下拉框必须用到一个id.通过该id才能定位到我们的下拉框的位置。也是通过该id我们才能给它赋值和取值。若需要用到多个自定义下拉框，只需重复步骤2.2和2.3并修改其id即可。

扫描二维码关注公众号，回复： 3085624 查看本文章

另外简单说一下一些点：

①需要修改下拉框的长度：修改.mySel cite{} 中的width属性并同时修改 .mySel ul{}中的width属性

②需要修改下拉框的高度 : 修改.mySel cite{}中的heigth属性. (overflow-y:scroll属性可以实现固定高度的滑动下拉效果)

③需要修改下拉选项的间距 : 修改.mySel ul li{}中的line-height属性.

④需要获取下拉选项的值：通过$("#mySelect cite").html();

⑤需要赋值给下拉选项：通过var val = '你的值'; $("#mySelect cite").html(val );

最后附上一段完整的验证代码：（可以直接复制整篇到文件后用浏览器打开）

<html>
<head>
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
  .mySel{position:relative; background: #fff;}
  .mySel cite{ width: 120px; padding-left:4px; display:block; color:#575757; cursor:pointer;font-style:normal; border:1px solid #E4E4E4;border-left: 1px solid #ccc;border-top: 1px solid #ccc;}
  .mySel ul{width:124px; height:130px; display:none; /*overflow-y:scroll;*/ border:1px solid #E4E4E4; background-color:#ffffff; position:absolute;margin-top:-1px;margin:0px;padding:0px;list-style:none;}
  .mySel ul li{padding-left:4px;line-height:25px;}
  .mySel ul li a{display:block; color:#333333; text-decoration:none;}
  .mySel ul li a:hover{background-color:#1277D3;color:white;}
</style>
</head>
<body>
  <table>
    <tr>
      <td>自定义下拉框：</td>
      <td>
          <span id="mySelect" class="mySel">
            <cite>请选择</cite>
            <ul>
              <li><a href="javascript:;"  ><span>请选择</span></a></li>
              <li><a href="javascript:;"  ><span style="color: red;">自定义内容1</span></a></li>
              <li><a href="javascript:;"  ><span>自定义内容2</span></a></li>
              <li><a href="javascript:;"  ><span>自定义内容3</span></a></li>
              <li><a href="javascript:;"  ><span>我<sup>你</sup></span></a></li>
            </ul>
          </span>
      </td>
    </tr>
  </table>

  <hr>
  <button id="getValBtn">取值</button>
  <button id="setValBtn">赋值</button>
  <script type="text/javascript">

    /*点击弹出和取消下拉内容*/
    $("#mySelect cite").click(function(event) {
      event.stopPropagation();
      $(this).siblings('#mySelect ul').toggle();
       var tag = $(this).siblings('#mySelect ul');
        var flag = true;
        $(document).bind("click",function(e){//点击空白处，设置的弹框消失
          var target = $(e.target);
          if(target.closest(tag).length == 0 && flag == true){
            $(tag).hide();
            flag = false;
          }
        });
    });

    /*选择下拉内容并收起*/
    $("#mySelect ul li a").click(function(){
      var b_1 = $(this).html();
      $("#mySelect cite").html(b_1);
      $("#mySelect ul").css("display","none");
    });

    /*取值*/
    $('#getValBtn').click(function(){
       var content = $("#mySelect cite").html();
       alert('当前值是：' + content);
    });
  
    /*赋值*/
    $('#setValBtn').click(function(){
      var content = '自定义内容2';
      $("#mySelect cite").html(content)
      alert('赋值为：' + content);
    });
  </script>
  
</body>
</html>

一分钟拿到一个自定义下拉框select来使用

一、最终效果

二、实现步骤

猜你喜欢