标签: jquery-select2

当没有选项时，选择框的宽度会缩小到太窄，甚至“未找到结果”也会出现扭曲。

参考小提琴

$('#example').select2({
    placeholder: 'Select a month'
});

<select id="example" multiple="multiple"></select>

有什么解决办法吗？

我有一个select2select 元素，我通过 jQuery 设置其值

$("#select2").val(elment_id).trigger('change');

但是，我已经定义了一个 onchange 事件处理程序。

$('#select2').on('change', function(e) {
//TODO
});

我只想更改（设置） 的值select2而不触发更改事件。任何想法，如何做？

我正在使用 select2。所以它不是一个实数输入字段我尝试创建一个仅允许带小数的数字的输入字段：

<input type="text" name="numeric" class='select2 allownumericwithdecimal'> 

 $(".allownumericwithdecimal").on("keypress keyup blur",function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
        }
      });

我现在需要的是，它不仅允许点，还应该允许逗号。这是我的方法：

 $(".allownumericwithdecimal").on("keypress keyup blur",function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
        if ((event.which != 46 || $(this).val().indexOf('.') != -1 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
        }

仍然不允许使用逗号.. });

我将https://github.com/stefangabos/world_countries cdn list 与 select2 连接以列出所有国家/地区。有人知道如何在国家/地区内搜索吗？

var countriesList = 'https://cdn.jsdelivr.net/npm/world_countries_lists@latest/data/en/countries.json';

$('select').select2({
  ajax: {
    url: countriesList,
    dataType: 'json',
    delay: 250,
    data: function (params) {
      console.log(params.term);
      return {
        q: params.term
      };
    },
    processResults: function (data) {
      return {
        results: $.map(data, function (item) {
          return {
            id: item.id,
            text: item.name
          };
        })
      };
    }
  },
  width: 300,
  dropdownAutoWidth: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>

<select></select>

我有一个带有 select 元素的 HTML 表单。不过我正在使用 select2 库。我想监听表单输入的变化。我添加了一个更改事件侦听器。但是，即使我更改选项，该事件也不会被触发。我已手动添加触发器，但仍然没有调用此更改事件。

形式

<form id="xform">

<select id="xselect">
  <option value="A" selected="selected">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<input type="email" class="input-text" name="test"  placeholder="" value="test">

</form>

<button onclick="trigger()">change</button>

js

$('#xselect').select2({
  placeholder: 'Select a letter'
});

var formFrom = document.querySelector('#xform');

formFrom.addEventListener('change', function(e) {
  console.log('input changed ');
  $('#xselect').trigger('change');
});

function trigger() {
  $('#xselect').val('C');
  $('#xselect').trigger('change');
}

演示

https://jsfiddle.net/982zfnkL/6/

基本上，当我单击更改按钮时，我希望看到“输入已更改”控制台日志。

为什么会出现这种情况？

我有一个select2组合框,我想从中清除所有项目.

如果我使用ID定位select,那么它可以工作:

$("#clearId").click(function(){
  $("#list").empty();
});

但是,如果我使用类来定位select,它实际上会从dom中删除select:

$("#clearClass").click(function(){
    $(".list").empty();
});

这可以在以下演示中看到:http://jsfiddle.net/NvrZu/

我需要能够通过一个类来定位选择.

我正在使用Select2来填充英国城镇的下拉列表.由于英国城镇数据库庞大,我认为AJAX调用将是引入数据的最佳方式.

我已经构建了一个post函数和一些PHP(在Codeigniter中)来捕获查询并解析它.

我可以看到数据正在发布和响应,但我的Select2没有填充数据.

我的jQuery是这样的:

 $("#areas").select2(
    {
        tags: [],
        ajax: {
            url: '/profile/get-towns',
            dataType: 'json',
            type: "POST",
            quietMillis: 100,
            data: function (term) {
                return {
                    query: term
                };
            },
            results: function (data) {
                return {
                    results: data.town_id
                }
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 4,
        placeholder         : "Start typing your Town / City",
        maximumSelectionSize: 2
    }
);

我的回复jSON(示例)如下:

[{"town_id":"16994","town":"Hartle"},{"town_id":"16995","town":"Hartlebury"},{"town_id":"16996","town"
:"Hartlebury"},{"town_id":"16997","town":"Hartlebury Common"},{"town_id":"16998","town":"Hartlepool"
},{"town_id":"16999","town":"Hartley"},{"town_id":"17000","town":"Hartley"},{"town_id":"17001","town"
:"Hartley"},{"town_id":"17002","town":"Hartley"},{"town_id":"17003","town":"Hartley Green"},{"town_id"
:"17004","town":"Hartley Green"},{"town_id":"17005","town":"Hartley Mauditt"},{"town_id":"17006","town"
:"Hartley Wespall"},{"town_id":"17007","town":"Hartley …

我想从select2输入中获取当前搜索项值(即使它不匹配).

<div class="select2-container select2-container-multi form-control" id="s2id_author">
    <ul class="select2-choices">  
        <li class="select2-search-field">    
            <label for="s2id_autogen1" class="select2-offscreen"></label>    
            <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" placeholder="" style="width: 34px;" aria-activedescendant="select2-result-label-2">  
        </li>
    </ul>
</div>

我已经做了好几次同样的事情(实际上也在同一个项目上)并且它工作正常.我对这个相同代码的实例有一个问题.首先,我从db表中选择一些数据:

$azioni = $pdo->query("SELECT id_az, concat_ws('-',Descrizione, RGE) as descrizione 
                       FROM azioni_head 
                          JOIN sofferenze ON sofferenze.id_soff = azioni_head.id_soff
                        ORDER BY Descrizione")
               ->fetchAll(PDO::FETCH_ASSOC);

这给了我一个像这样的数组(只是前几个项目):

Array
(
    [0] => Array
        (
            [id_az] => AZ000000126
            [descrizione] => Acciaierie Weissenfels S.p.A.-n/d
        )

    [1] => Array
        (
            [id_az] => AZ000000017
            [descrizione] => Acofer S.p.A.-n/d
        )
)

然后我在Json数组中转换这个数组: var azioni = <?php echo json_encode($azioni); ?>; 最后我使用这些数据填充Select2但这次select2里面没有任何项目.如果我尝试使用alert(azioni.join( ));我得到的数据进行编码后查看数组:

[object Object],[object Object],[object Object],[object Object],

最后我跑:

$('#cod_az').select2({ placeholder: "Scegli", data: azioni });

怎么了？为什么我不能用这个数组用数据填充Select2？它适用于我的应用程序的其他部分!

编辑 这是firebug中console.log(azioni)的结果:

[
Object { …

我几个小时以来一直在寻找这个问题的答案,但是没有发现任何与我的情况有关的事情.

我的设置:我创建了一个自定义TinyMCE按钮,其中包含一个WordPress主题的弹出窗口,允许用户从下拉列表中选择自定义帖子类型的帖子(在本例中为"客户评论"),然后将其ID插入到短代码.由于这个主题将运行的网站有超过1,000条评论,我认为json编码下拉列表的数据会更好,然后使用select2搜索有限结果列表(分页结果)并保留整个事物从炸毁.所有这一切都成功,除了2项:

1. json编码数据显示,但是当我输入搜索词时,select2下拉列表会显示所有带有第一个选中的评论的列表.即使搜索的文本在列表中,它也找不到结果

2. 从上面,一旦我输入一个搜索词,select2显示所有结果而不是10,或我设置的任何限制.

以下是我对json编码数据的方式(在一个名为bpl_content.php的文件中):

$args       = array('post_type' => 'customer_reviews', 'posts_per_page' => -1, 'fields' => 'ids');
$posts      = get_posts($args);

if( $posts ) :

    $reviews = array();

    foreach( $posts as $post ) : setup_postdata( $post );

        $title  = get_the_title();
        $the_ID = get_the_ID();

        $reviews[] = array (
            'id'    => $the_ID,
            'text'  => $title
        );

    endforeach;

endif;

echo json_encode( $reviews )

返回

[{"id":12286,"text":"John Doe"},{"id":12285,"text":"Jane Doe"},...]

(有超过800件商品退货,所以上面只显示2件,但你明白了)

这是我用来填充json数据的<select>菜单的javascript:

$(".js-data-example-ajax").select2({
    placeholder: "Select a Review",
    ajax: {
        url: "_bpl_content/bpl_content.php",
        type: 'POST',
        params: {
            contentType: 'application/json; charset=utf-8' …