标签: jquery-select2

我正在使用 Select2 库（版本 4.0.1），但我的选择下拉菜单位置很奇怪。您可以在下图中看到。

您可以看到 select2 下拉列表与选择区域重叠，我可以在文档的示例中看到它应该出现在选择的底部。这是我的代码

<select class="select2">
   <option>--Select--</option>
   <option>Sample Page</option>
</select>

<script>
  jQuery(document).ready(function() {
    jQuery('.select2').select2();
  });
</script>

有什么想法为什么会发生这种情况吗？

我能够让 select2-rails 在大部分情况下工作，但是当我单击搜索栏时，我得到以下信息：

我正在使用以下 CoffeeScript：

    $('#query').select2({
            placeholder: placeholder_text
            minimumInputLength: 2
            ajax:
                    url: end_point
                    tags: "false",
                    dataType: 'json',
                    delay: 200,
                    cache: true,
                    data: (params) ->
                            return { search: params.term.toUpperCase() }
                    processResults: (data, params) ->
                            return { results: data }
            theme: "bootstrap"
    })

以及以下 HTML：

<div class="col-md-6 text-right">
   <form>
      <%= select_tag "search", {}, id: "query" %>
    </form>
</div>

应用程序.css

 *= require select2                                                                                 
 *= require select2-bootstrap                                                                       
 *= require_tree .                                                                                  
 *= require_self 

应用程序.js

//= require jquery                                                                                  
//= require jquery.turbolinks                                                                       
//= require jquery_ujs                                                                              
//= require …

有一种方法可以在 Select2 中添加自定义用户输入，而无需使用该tags模式。

也就是说，创建一个保留选择样式的自定义选择输入，而不使用内联块小标签。

另外，我发现了很多使用 AJAX 和其他主题外的答案，但没有一个能解决我的问题。

使用最新的 select2 和多个选项。当用户选择任何选项时，我需要创建所选选项值和文本的数组。为了获得价值，我使用：

var id=$('#select2_dropdown').val();

它使数组像id[]="value1", id[]="value2"，等等。

现在我需要为标签之间的文本创建相同的数组<option>。在使用 jQuery 从下拉列表（选择框）获取选定文本中找到了解决方案，因此添加了以下代码：

var name=$("#select2_dropdown option:selected").text();

虽然它非常适合单选，但尝试将它与多选一起使用只会产生一个类似的字符串name=optiontext1optiontext2（所有选定选项的字符串合并为一个）

我怎样才能让它看起来像这样：name[value1]=optiontext1, name[value2]=optiontext2？

尝试过这个但没有任何运气：

var id=$("#select2_dropdown option:selected").text();
var name[id]=$("#select2_dropdown option:selected").text();

我正在asp.net核心工作并使用打字稿。我想使用该select2选项。为此，我使用这一行：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 

当我运行该项目时，我发现以下错误：

如何解决呢？

我遇到了这个无法解决的问题。我所做的一切都行不通。我使用很多表单，所以我决定为每个表单创建一个 php 文件，然后使用 ajax 加载调用该表单。

Js文件：

$('#firstForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url : "includes/firstform.inc.php",
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {
        $('.content-container').load('forms/zipscreens-form.php');

        },
        error: function (jXHR, textStatus, errorThrown) {

        }
    });
});

HTML 容器：

<div class="content-container">
// in this div the form will be stored.
</div>

选择表格：

<select class="js-example-basic-single" name="selectWidth">
  <?php 
   for ($row = 1; $row <= $lastRow; $row++) {
    echo "<option value='AL'>"; echo $worksheet->getCell('A'.$row)->getValue(); echo "</option>'";
   }
  ?>
</select>

为什么这不起作用？

我的页面上有 Select2 Javascript 小部件。

$('#order_address_select').select2({
  placeholder: "Select adress",
  ajax: {
    url: '<?=Yii::app()->getBaseUrl(true)?>/order/getplacemarklist',
    dataType: 'json',
  },
  tags: true,
});

当我输入一些文本时，如果在数据库中找不到它并且没有通过ajax加载，我无论如何都可以选择它，原因属性tags设置为true. 然后我有以下代码

 $('#order_address_select').change(function () {
   alert($("#order_address_select option[data-select2-tag='true']").val());
 });

问题是当我输入文本并将其选择为标签时，事件不会第一次触发。但是，当我再次输入文本并选择它时，代码会提醒先前选择的选项的值。例如：我输入“aaa”，选择它，没有任何反应，然后我输入“bbb”，选择它，并收到“aaa”警报

如何在 Yii2 kartik select2 中隐藏历史下拉列表？这是我的源代码：

<div class="col-sm-offset-2 col-sm-10" style="margin-left:135px;margin-bottom:15px">
<label class="control-label">Range Perjalanan Dinas</label>
    <?= DatePicker::widget([
    'type' => DatePicker::TYPE_RANGE,
    'model' => $model,
    'attribute' => 'tgl_mulai',
    'attribute2' => 'tgl_selesai',
    'options' => ['placeholder' => 'Start date'],
    'options2' => ['placeholder' => 'End date'],

    'form' => $form,
    'pluginOptions' => [
        'format' => 'dd-mm-yyyy',
        'autoclose' => true,
    ]
]); ?>
</div>

里面的引导panel我有一个form，我使用select2的选择输入。

的问题是，当我定义了panel要由默认关闭（通过去除in从所述class="panel-collapse collapse"）所述的宽度select2输入变得越来越小！

$('.js-example-basic-single').select2({
  placeholder: "Select...",
  allowClear: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />



<div class="container-fluid">
  <div class="row">
    <div class="col-xs-10">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <i class="fa fa-plus mright-1"></i> closed by default
              </a>
            </h4>
          </div>
          <div id="collapseOne" …

我正在尝试将 select2 与输入组一起使用，但该按钮始终位于 select2 控件之后的下一行。如果您删除 select2 类，它会按预期工作。如果 select2 引导程序基于引导程序主题，为什么它不遵循标准引导程序输入组类？我缺少什么来确保它们都在同一行上并作为一个组显示？

没有 select2 类（以及我希望它看起来如何）

使用 Select2

使用 Select2 并添加 style="width:75%" （底部关闭）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
    <link rel="stylesheet" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.js"></script>
</head>
<body class="container">
    <p></p>
    <div class="input-group">
        <select class="form-control select2" placeholder="Search"></select>
        <div class="input-group-append">
            <button class="btn btn-success" type="submit">Go</button>
        </div>
    </div>
</body>
</html>

<script>
    $(".select2").select2({
        theme: "bootstrap",
        placeholder: "Search"
} );
</script>