javascript - 标签 javascript 设置最大值

我有一个 JavaScript，我想将最大标签选项添加为仅 6 个且不重复，这是我迄今为止的代码

             <div id="tags">
                <span>php</span>
                <span>c++</span>
                <span>jquery</span>
                <input type="text" value="" placeholder="Add a tag" />
              </div>
<script>
$(function(){ // DOM ready    
  // ::: TAGS BOX    
  $("#tags input").on({
    focusout : function() {
      var txt= this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>",{text:txt.toLowerCase(), insertBefore:this});
      this.value="";
    },
    keyup : function(ev) {
      // if: comma|enter|space (delimit more keyCodes with | pipe)
      if(/(188|13|32)/.test(ev.which)) $(this).focusout();
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove();
  });

});
</script>

Demo

最佳答案

我用了Select2为此:

使用标签样式。
没有重复。
最多 3 个选择。

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
    <script>
      $(function () {
        $(".select2").select2({
          maximumSelectionLength: 3,
          width: 350
        });
      });
    </script>
  </head>
  <body>
    <select name="tags" id="tags" class="select2" multiple="multiple">
      <option value="PHP">PHP</option>
      <option value="CSS">CSS</option>
      <option value="CPP">C++</option>
      <option value="JavaScript">JavaScript</option>
    </select>
  </body>
</html>

片段

$(function () {
  $(".select2").select2({
    maximumSelectionLength: 3,
    width: 350
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="tags" id="tags" class="select2" multiple="multiple">
  <option value="PHP">PHP</option>
  <option value="CSS">CSS</option>
  <option value="CPP">C++</option>
  <option value="JavaScript">JavaScript</option>
</select>

演示: JSBin

关于javascript - 标签 javascript 设置最大值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44687593/

javascript - 标签 javascript 设置最大值

上一篇：javascript - 如何将 BLOB 对象(音频)转换为普通音频(如 .mp3 或 .wav)以更新数据库

下一篇：javascript - meteor JS : How to get title data via server method by given id array