Home > Article > Web Front-end > Use jquery to implement drop-down list options

Use jquery to implement drop-down list options

巴扎黑Original: 2018-05-14 15:01:441674browse

This article mainly introduces the implementation of multi-select drop-down list based on jquery in detail. It has certain reference value. Interested friends can refer to it.

The example of this article shares with everyone the implementation of multi-select drop-down list with jquery. Select the specific code displayed in the drop-down list for your reference. The specific content is as follows

<!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">  
    <p class="width150">
      可多选年份：<input type="text" id="yearInput" placeholder="请选择年份" readonly>
      <ul id="yearId" class="hide">
      </ul>
    </p>
  </form>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script>
  (function(){
    var str = &#39;&#39;;
    var arr = {
      0 : {name:&#39;2015&#39;,id:0},
      1 : {name:&#39;2016&#39;,id:0},
      2 : {name:&#39;2017&#39;,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>`;
    }
    $(&#39;#yearId&#39;).html(str);
  })();

  $("#yearInput").click(function(){
    $(this).attr(&#39;placeholder&#39;,&#39;&#39;);
    var name = &#39;&#39;;
    $(&#39;#yearId input&#39;).each(function () {//循环遍历checkbox
      var check=$(this).is(&#39;:checked&#39;);//判断是否选中
      if(check){
        name += $(this).attr(&#39;data-name&#39;)+&#39;,&#39;;
        $(this).attr(&#39;name&#39;,"yearId");
      }else {
        $(this).attr(&#39;name&#39;,"");
      }
    });
    $("#yearInput").val(name.slice(0,-1));//去除最后的逗号
  });

  $("#yearId").mouseover(function() {
    if (!$("#yearId").hasClass(&#39;hover&#39;)){//类hover在下面用来验证是否需要隐藏下拉，没有其他用途。
      $("#yearId").addClass(&#39;hover&#39;);
    }
  }).mouseout(function(){
    $("#yearId").removeClass(&#39;hover&#39;);
  });

  $(document).on(&#39;click&#39;,function() {
    if (!$("#yearInput").is(":focus") && !$("#yearId").hasClass(&#39;hover&#39;)) {//如果没有选中输入框且下拉不在hover状态。
      var name = &#39;&#39;;
      $(&#39;#yearId input&#39;).each(function () {//遍历checkbox
        var check = $(this).is(&#39;:checked&#39;);//判断是否选中
        if (check) {
          name += $(this).attr(&#39;data-name&#39;) + &#39;,&#39;;
          $(this).attr(&#39;name&#39;, "yearId");
        } else {
          $(this).attr(&#39;name&#39;, "");
        }
      });
      $("#yearInput").val(name.slice(0, -1));//去除最后的逗号
      $("#yearId").addClass(&#39;hide&#39;);
    } else {
      $("#yearId").removeClass(&#39;hide&#39;);
    }
  });
</script>
</html>

Rendering:

The above is the detailed content of Use jquery to implement drop-down list options. For more information, please follow other related articles on the PHP Chinese website!

jquery

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implements uploading and previewing images without refreshingNext article：JavaScript implements uploading and previewing images without refreshing

See more

Use jquery to implement drop-down list options

Related articles