标签: jquery-select2

我需要实现一个与此类似的选择http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

我想使用select2,但是我无法从select2的创建者那里找到任何支持这种带有复选框的下拉样式的东西.有谁知道这样做的方法？

我正在使用awesome select2创建一个多选组合.

我想以编程方式选择默认值(如用户先前所做的选择),但我不知道如何.我读到使用initSelection可以解决这个问题,但是在创建组合时会调用它,我不希望始终完成此默认选择.

我正在使用select2插件(ivaynberg.github.io/select2).我正在尝试显示下拉列表(选择).它将data.php中的所有项目作为选项.但是,select2意味着是自动完成插件,应该搜索客户端输入的搜索词,并仅显示匹配结果.目前它显示所有项目而没有获得搜索结果.抱歉我的语言

data.php正在回应这个:

[{
    "id": "1",
    "text": "item1",
    "exercise": "blah text"
  }, {
    "id": "2",
    "text": "item2"
  }
]

代码是:

$(document).ready(function () {
    $('#thisid').select2({
        minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });
});

输入是:

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

我想找到一个线索,我对这个插件很新,并花了一天时间查看示例.

使用Select2通过远程调用动态填充texbox,我希望允许用户将该字段留空.

$("#e6").select2({
    placeholder: "Search for a movie",
    minimumInputLength: 1,
    ajax: { 
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
        dataType: 'jsonp',
        data: function (term, page) {
            return {
                q: term, // search term
                page_limit: 10,
              };
        },
        results: function (data, page) { 
            return {results: data.movies};
        }
    },
 });

这是一个工作示例http://ivaynberg.github.io/select2/index.html#ajax

我正在尝试使用Select2 4.0分页结果(每25行),但我不知道如何实现它.有人知道怎么做吗？

如果用户到达25行的末尾,并且如果有更多行,我想加载它并显示它.

这是我的HTML模板

<div class="form-group">
    {!! Form::select('breed_id', $breeds, null, ['class' => 'form-control', 'id' =>'breed_id'] ) !!}
</div>

这是Select2的JavaScript.

$("#breed_id").select2({
    placeholder: 'Breed...',
    width: '350px',
    allowClear: true,
    ajax: {
        url: '',
        dataType: 'json',
        data: function(params) {
            return {
                term: params.term
            }
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    }
});

这是我的控制器代码

if ($request->ajax())
{
    $breeds = Breed::where('name', 'LIKE',  '%' . Input::get("term"). '%')->orderBy('name')->take(25)->get(['id',DB::raw('name as text')]);

    return response()->json($breeds);
}

当我试图把params.page它说成"未定义"时.

Select2 Jquery插件

我很难在jquery Select2中覆盖默认消息的最小长度输入.

默认情况下,插件提供以下消息.

默认文字

Please enter 1 more characters

我的要求是显示以下文字

必填文字

Enter 1 Character

请分享解决方案.谢谢.

我正在关注这个文档http://ivaynberg.github.io/select2/来创建选择框placeholder.我的问题是placeholder不起作用.你能帮忙解决这个问题吗？

代码:也在http://jsfiddle.net/VwGGU/3/

HTML:

<select style="width:300px" id="source">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
</select>

使用Javascript:

$("#e2").select2({
    placeholder: "Select a State",
    allowClear: true
});

上面的示例显示"Alaska"而不是"Select a State"作为占位符.

更新1:

select2.js现在添加并清空option.它仍然没有显示placeholder

HTML

<select style="width:300px" id="source" placeholder="testt test">
    <option></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option …

假设您有以下HTML5

<select id="example">
    <option value="AA" data-id="143">AA</option>
    <option value="BB" data-id="344">BB</option>
</select>

$("#example").select2();

如何从所选选项中获取数据ID？

我在项目中使用Select2来设置搜索表单中某些选择框的样式.我设法将箭头容器的渐变背景更改为黑色渐变:

.select2-container .select2-choice .select2-arrow {
    background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
    background-image: -moz-linear-gradient(top, #424242, #030303);
    background-image: -ms-linear-gradient(top, #424242, #030303);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
    background-image: -webkit-linear-gradient(top, #424242, #030303);
    background-image: -o-linear-gradient(top, #424242, #030303);
    background-image: linear-gradient(#424242, #030303);
}

我希望箭头是白色的,但不幸的是,Select2使用背景图像作为不同的图标而不是字体 - 真棒或类似的东西,所以没有办法只用CSS改变颜色.

什么是使箭头变为白色而不是默认灰色的最简单方法？我真的要用自己的替换背景png(select2.png和select2x2.png)吗？或者有更简单的方法吗？

我的另一个问题是如何更改选择框的高度.我知道如何在打开状态下更改下拉框的高度,但我想在闭合状态下更改选择框的高度.有任何想法吗？

我有list2类型的列表.

<select id="list" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<optgroup label="Types">
<option value="None">None</option>
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
</select>

我想禁用值为1的选项, 所以我喜欢这样

$("#list>optgroup>option[value='1']").prop('disabled',true);
   Result:// <option value="1" disabled>One</option>

它工作正常;但如果我想重新启用禁用选项我尝试下面的代码,但仍然禁用select2选项.

$("#list>optgroup>option[value='1']").prop('disabled',false);
$("#list>optgroup>option[value='1']").removeProp('disabled');
  Result://   <option value="1">One</option>

但奇怪的是该选项的禁用属性被删除.但select2选项保持禁用状态.

没有得到如何解决这个问题.需要帮忙.

更新:如果我检查select2的DOM,即使在removinf禁用后它也具有此属性.

<li class="select2-results__option" id="select2-template-type-list-result-4qd3-merge" role="treeitem" aria-disabled="true">One</li>

如果我使aria-disabled ="false"它将启用.无法得到原因.