标签: jquery-select2

如何通过Ajax请求使用带有JSON的Select2?

我的Select2 3.4.5不能使用JSON数据.

这是HTML上的输入框:

<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />
Run Code Online (Sandbox Code Playgroud)

......和我的JavaScript

$(".itemSearch").select2({
    placeholder: "Search for an Item",
    minimumInputLength: 2,
    ajax: {
        url: "/api/productSearch",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                option: term
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {
                results: data.itemName,
                more: more
            };
        }
    },
    formatResult: function (data, term) {
        return data;
    },
    formatSelection: function (data) {
        return data;
    },
    dropdownCssClass: "bigdrop",
    escapeMarkup: …
Run Code Online (Sandbox Code Playgroud)

javascript json laravel jquery-select2

79
推荐指数
5
解决办法
16万
查看次数

Select2 Ajax方法未选择

好吧,我确定这里有一些简单的设置错误,但我不是100%它是什么.

所以我试图使用Select2 AJAX方法作为用户搜索数据库和选择结果的方式.呼叫本身会返回结果,但不允许我从列表中选择答案.它似乎也不允许您在悬停或向上/向下箭头上"选择"它.所以不用多说,这是我的代码:

的index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
        <script src="select2/select2.js"></script>
        <script src="select.js"></script>
    </head>
    <body>
        <input type="text" style="width: 500px" class="select2">
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

select.js

jQuery(function() {

  var formatSelection = function(bond) {
    console.log(bond)
    return bond.name
  }

  var formatResult = function(bond) {
    return '<div class="select2-user-result">' + bond.name + '</div>'
  }

  var initSelection = function(elem, cb) {
    console.log(elem)
    return elem
  }

    $('.select2').select2({
      placeholder: "Policy Name",
      minimumInputLength: 3,
      multiple: false,
      quietMillis: 100,
      ajax: {
        url: "http://localhost:3000/search",
        dataType: 'json',
        type: …
Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery jquery-select2 jquery-select2-3

72
推荐指数
4
解决办法
5万
查看次数

在select2中使用AJAX进行标记

我正在用select2进行标记

我对select2有这些要求:

  1. 我需要使用select2 ajax搜索一些标签
  2. 另外我需要在select2中使用"tags",它允许不在列表中的值(Ajax结果).

这两个场景都是独立运作的 但加在一起的aJax值只是填充.如果我们输入不在列表中的任何其他值,则表示"找不到匹配项"

我的场景如果用户键入列表中没有的任何新值,请允许他们组成自己的标记.

有什么办法使这项工作?

javascript jquery jquery-select2

70
推荐指数
3
解决办法
4万
查看次数

选择select2后触发一个动作

我正在使用select2库进行搜索.
有没有办法在选择搜索结果后触发操作?例如打开弹出窗口或简单的js警报.

$("#e6").select2({
    placeholder: "Enter an item id please",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "index.php?r=sia/searchresults",
        dataType: 'jsonp',
        quietMillis: 3000,
        data: function (term, page) {
        return {
            q: term, // search term
            page_limit: 10,
            id: 10
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not …
Run Code Online (Sandbox Code Playgroud)

search jquery jquery-select2

70
推荐指数
6
解决办法
14万
查看次数

使用<input>时如何从select2获取Selected Text

我正在使用select2控件,通过ajax 加载数据.这需要使用<input type=hidden..>标签.

现在,我想检索选定的文本.(表达式中的value属性仅为data-bindsotres id)

我试过了$(".select2-chosen").text(),但是当我在页面上有多个select2控件时,这会中断.

javascript jquery knockout-2.0 jquery-select2 ui-select2

64
推荐指数
3
解决办法
14万
查看次数

select2动态更改项目

我有两个链接的选择:第一个选择的每个值确定将在第二个选择中显示哪些项目.

第二个选择的值存储在二维数组中:

[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
  [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
  ...
]
Run Code Online (Sandbox Code Playgroud)

第一个选择值确定用于填充第二个选择的索引.所以在第一个"更改"事件中我应该能够修改select-two包含的项目.

阅读文档我认为我需要使用"数据"选项...但不知道如何在初始化时加载数组数据,如果我在初始化后尝试执行相同操作,它似乎不起作用.

HTML

Attribute:
<select name="attribute" id="attribute">
    <option value="0">Color</option>
    <option value="1">Size</option>
</select>

Value:
<select name="value" id="value"></select>

<script>
   var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],
                [{"id":"1","text":"9"},{"id":"1","text":"10"},...],
              ];
   $('#attribute').select2().bind('change', function(){
      // Here I need to change `#value` items.
      $('#value').select2('data',data[$(this).val()]);  // This does not work
   );

   $('#value').select2();
</script>
Run Code Online (Sandbox Code Playgroud)

javascript jquery-select2

62
推荐指数
4
解决办法
13万
查看次数

使用重置按钮重置下拉列表中的Select2值

将所选项目重置为默认值的最佳方法是什么?我正在使用Select2库,当使用普通按钮时type="reset",下拉列表中的值不会重置.

因此,当我按下我的按钮时,我希望再次显示"全部".

jQuery的

$("#d").select2();
Run Code Online (Sandbox Code Playgroud)

HTML

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
Run Code Online (Sandbox Code Playgroud)

html javascript forms jquery-select2

59
推荐指数
8
解决办法
11万
查看次数

如何更改select2框高度

我喜欢来自https://github.com/ivaynberg/select2的select2框 我使用format:选项来格式化每个元素,它看起来很棒.

一切都很好,除了由于图像选定的元素大于选择框的高度.

我知道如何更改宽度,但是如何更改高度以便在选择元素之后,它会显示完整的内容(约150px)

这是我的启蒙:

<script>
    $("#selboxChild").select2({
        matcher: function(term, text) { 
            var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text); 
            return t.toUpperCase().indexOf(term.toUpperCase()) >= 0; 
        },
        formatResult: formatChild,
        formatSelection: formatChild,
        escapeMarkup: function(m) {
            return m;
        }
    });
</script>
Run Code Online (Sandbox Code Playgroud)

这是我的选择框

<select id="selboxChild" style="width: 300px; height: 200px">
    <option value="">No child attached</option>
</select>
Run Code Online (Sandbox Code Playgroud)

要澄清:我不希望每个选项的高度都改变 我在选择一个孩子后我正在寻找选择框来改变高度.

因此,当页面首次加载时,显示"未选择子项"当您单击下拉菜单并选择一个孩子时,您会看到孩子的图像.现在我需要选择框来扩展!否则孩子的照片会被切断.

有人明白吗?

jquery jquery-select2

57
推荐指数
10
解决办法
11万
查看次数

$ watch不会触发数据更改

我有一个针对ui-select2下拉模型的手表设置(来自ui-bootstrap).手表会在负载时触发但不会在数据更改时触发,我无法弄清楚原因.

这不是通常的问题,即不应用模型更改或不使用第三个参数进行相等性比较(至少从我的代码中).

我需要做些什么来解雇它?

这是一个证明这个问题的插件.

angularjs jquery-select2 angular-ui-bootstrap

57
推荐指数
4
解决办法
8万
查看次数

JQuery select2从列表中的选项设置默认值?

我希望能够使用JQuery Select2插件设置select元素的默认/选定值.

javascript jquery html-select jquery-select2

55
推荐指数
7
解决办法
15万
查看次数