基于jquery實現多選下拉列表

2019-11-19 15:55:17

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了jquery實現多選下拉列表展示的具體代碼，供大家參考，具體內容如下

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>   ul li{    list-style: none;    }   .hide{display: none}   .width150{    width: 150px;    }   .width150 input[type="text"]{     width: 100%;      height: 32px;      border: 1px solid #ccc;      border-radius: 4px;      padding-left: 12px;   }    .width150 ul{       width: 96%;       padding: 0 0 0 20px;       margin: 0;       border: 1px solid #ccc;     }    .width150 li{       padding: 5px;     }    .width150 li+li{       border-top: 1px solid #ccc;     }  </style></head><body>   <form id="form">      <div class="width150">      可多選年份：<input type="text" id="yearInput" placeholder="請選擇年份" readonly>      <ul id="yearId" class="hide">      </ul>    </div>  </form></body><script type="text/javascript" src="jquery.js"></script><script>  (function(){    var str = '';    var arr = {      0 : {name:'2015',id:0},      1 : {name:'2016',id:0},      2 : {name:'2017',id:0}    };    for (let x in arr){      console.info(x);      str += `<li><label><input type="checkbox" value="${arr[x].id}" data-name="${arr[x].name}">${arr[x].name}</label></li>`;    }    $('#yearId').html(str);  })();  $("#yearInput").click(function(){    $(this).attr('placeholder','');    var name = '';    $('#yearId input').each(function () {//循環遍歷checkbox      var check=$(this).is(':checked');//判斷是否選中      if(check){        name += $(this).attr('data-name')+',';        $(this).attr('name',"yearId");      }else {        $(this).attr('name',"");      }    });    $("#yearInput").val(name.slice(0,-1));//去除最后的逗號  });  $("#yearId").mouseover(function() {    if (!$("#yearId").hasClass('hover')){//類hover在下面用來驗證是否需要隱藏下拉，沒有其他用途。      $("#yearId").addClass('hover');    }  }).mouseout(function(){    $("#yearId").removeClass('hover');  });  $(document).on('click',function() {    if (!$("#yearInput").is(":focus") && !$("#yearId").hasClass('hover')) {//如果沒有選中輸入框且下拉不在hover狀態。      var name = '';      $('#yearId input').each(function () {//遍歷checkbox        var check = $(this).is(':checked');//判斷是否選中        if (check) {          name += $(this).attr('data-name') + ',';          $(this).attr('name', "yearId");        } else {          $(this).attr('name', "");        }      });      $("#yearInput").val(name.slice(0, -1));//去除最后的逗號      $("#yearId").addClass('hide');    } else {      $("#yearId").removeClass('hide');    }  });</script></html>

效果圖：