Maison > Article > interface Web > Utilisez jquery pour implémenter les options de liste déroulante

Utilisez jquery pour implémenter les options de liste déroulante

巴扎黑original: 2018-05-14 15:01:441673parcourir

Cet article présente principalement en détail la mise en œuvre de la liste déroulante à sélection multiple basée sur jquery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec vous le. implémentation d'une liste déroulante à sélection multiple avec jquery. Sélectionnez le code spécifique affiché dans la liste déroulante pour votre référence. Le contenu spécifique est le suivant

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

Rendu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript implémente le téléchargement et la prévisualisation des images sans actualisationArticle suivant：JavaScript implémente le téléchargement et la prévisualisation des images sans actualisation

Articles Liés

Voir plus