jquery select2设置输入值

Posted 2023-05-07

【中文标题】jquery select2设置输入值

【英文标题】：jquery select2 setting input value

【发布时间】：2016-04-26 21:57:31

【问题描述】：

我使用 select2 有以下输入文本框：

<div class="col-md-6">
    <div class="form-group">
        <label for="QRY_Owner"> Owner ID</label>
        <input id="QRY_Owner" type="text" style="width:100%">
        </input>
    </div>
</div>

使用 select2 设置如下：

            $("#QRY_Owner").select2(
                placeholder: "Owner ID",
                tags: [],
                tokenSeparators: [",", " ", ";"],
                maximumInputLength: 12,
                selectOnBlur: true,
                dropdownCssClass: "hiddenSelect2DropDown"
            );

现在，我想为文本输入设置默认值。我尝试了以下方法：

$("#QRY_Owner").select2("val", "test value");

以及以下内容：

$("#QRY_Owner").select2(
    tags:  ["red", "green", "blue"]
);

以及以下内容：

 $("#QRY_Owner").val("close");

但表单没有更新，输入字段为空白。此外，我在浏览器控制台中没有收到任何错误。

对我在这里缺少什么有什么想法吗？

这是一个显示我的问题的 jsfiddle： https://jsfiddle.net/snehilw/90m8hzpg/

【问题讨论】：

首先，请修复您的<input>，它没有结束标记</input>，然后尝试再次运行您的代码

select2 不是用于输入，而是用于下拉列表 当然输入中不会显示任何内容.. 你也不能通过 ("val ", "测试值");这不是 php.. 你必须以 JSON 格式传递数据

正如@IlanHasanov 所说，您甚至可以在Select 2 homepage 上阅读它。创建元素后，您可以通过 JQuery 即时传递输入所需的值。

所以我尝试了'$("#QRY_Owner").val("close");'没有运气

@Rookie 部分问题是您希望将<input> 与.select2() 一起使用，其中.select2() 与<select> 标签一起使用，如select2 文档中所述。您的 JSFiddle 是我刚才所说的演示。除此之外，如果您真的想更改值毕竟，那么您需要做的是重新使用.select2 函数（复制/粘贴）并替换其中的placeholder 属性任何你想要的文字。

【参考方案1】：

来自JQuery select2 set default value from an option in list?。 只需添加：

.select2('val', ['AL', 'WY'])

jsfiddle

【讨论】：

Updated fiddle使用.select2('data',[id: 0, text: 'story',id: 1, text: 'bug',id: 2, text: 'task'])，参考Creating new tags in a Select2 tag textarea

【参考方案2】：

部分问题是您希望将<input> 与.select2() 一起使用，其中.select2() 与<select> 标记一起使用，如select2 docs 中所指定。

您的 JSFiddle 是我刚才所说的演示。除此之外，如果你真的想改变这个值，那么你需要做的是重新使用 .select2 函数（复制/粘贴）并用你想要的任何文本替换其中的占位符属性：

$(document).ready(function()
  var QRY_Owner = $("#QRY_Owner");

  QRY_Owner.select2(
    placeholder: "Owner ID",
    tags: [],
    tokenSeparators: [",", " ", ";"],
    maximumInputLength: 12,
    selectOnBlur: true,
    dropdownCssClass: "hiddenSelect2DropDown"
  );

  QRY_Owner.select2(
    placeholder: "Test text",
    tags: [],
    tokenSeparators: [",", " ", ";"],
    maximumInputLength: 12,
    selectOnBlur: true,
    dropdownCssClass: "hiddenSelect2DropDown"
  );
);

请记住，在 JQuery 中始终使用 $(document).ready，这是最佳做法。