Question

有时当我使用自由网站时，我经常会遇到选择技能的部分，能够搜索技能然后点击它们。点击技能后，技能会添加到您的＆＃34;库存＆＃34;像椭圆形按钮一样的技巧。但是，如果您添加了错误的技能，则可以将鼠标悬停在该技能上，然后单击该按钮的（x）部分将其删除。如果要将标记添加到问题中，它也会在stackoverflow中使用。

我有兴趣做类似的事情，但我很快意识到我甚至不知道这个＆＃34;按钮＆＃34;因此我的问题被称为特征。我添加了它的图片以供参考。

Answer 1

<强> HTML

<form action="" id="tag">
    <select multiple="true" name="select[]" id="select" class="form-control select2">
    </select>
    <button type="submit">Submit</button>
</form>

<强>脚本

$('#select').select2({
    tags: true,
    tokenSeparators: [",", " "],
    ajax: {
        url: "time.php",
        dataType: 'json',
        data: function (term, page) {
             return {
                  q: term, // search
                  page: page
             };
             },
    results: function (data, page) {
        return { results: data};
    }
}
});

   $('#tag').submit(function(e){
     e.preventDefault();
     $.ajax({
      url: "test.php",
      type  : 'POST',
      dataType : 'json',
    // serialize the form:
    data     : $('#tag').serialize(),
    success  : function(response){
    //handle data
    }
  });
});

php代码

<?php
  if(isset($_GET['select']){ //check if there is vlaue
    foreach($_GET['select'] as $key => $value){
   }
  }
  ?>

注意：它适用于select2版本4.0

希望这可能会有所帮助，因为我在我的网站中使用了这个，它对我有用，你需要的函数需要ajax和jquery我已经给了我的页面的脚本和php而且不要忘记链接jquery调用此脚本之前的脚本

Answer 2

这称为多选，可通过名为select 2的插件轻松实现。

只需加入select 2 css和select 2 js，就可以了。

<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

请参阅此链接以获取演示和信息

https://select2.github.io/examples.html

希望这有帮助

可移动按钮的名称是什么？

2 个答案: