【问题标题】:Add options to Select2 after inititialzation初始化后向 Select2 添加选项
【发布时间】:2026-02-05 06:50:01
【问题描述】:

这似乎是一件标准的事情,但我正在努力寻找一个清晰简单的解决方案。

我希望能够向已初始化的 Select2 添加一个或多个附加选项。

我使用的是旧版本的 Select2,但不确定是什么版本。

【问题讨论】:

    标签: jquery-select2


    【解决方案1】:

    您可以像解决标准<select> 一样解决大多数涉及 Select2 的问题。在这种情况下,对应的<select> 问题将是:Adding options to select with javascript

    var option = new Option("text", "id");
    $("select").append(option);
    

    如果您希望它在插入时被选中,您可以在新选项上设置selected 属性。

    var option = new Option("text", "id");
    option.selected = true;
    
    $("select").append(option);
    $("select").trigger("change");
    

    请注意,我还触发了change 事件,以便 Select2 可以知道所选选项已更改。

    【讨论】:

    • 凯文,我向 select2 提出了一个问题。看来您对此有很好的经验,并且可以解决问题。我尝试了多次,但它不起作用。如果可能的话,请你看看这个。 *.com/questions/35729864/…
    • 谢谢你,正是我所需要的!
    【解决方案2】:

    天啊,有时我应该在发帖之前停下来思考一下。

    就像在底层选择中添加一个新选项一样简单:

    $("#myselect").append($('<option>', {value: 1, text: 'new option'}));
    

    甚至不需要重新初始化select2

    【讨论】:

      【解决方案3】:

      我用 select2 的“数据”属性解决了这个问题。首先,我使用 json 获取数据,然后使用我的数组创建我的 select2 元素,如下所示。

      corrCodeArray 是我的 json 数组。

      function fillSelectReportPeriod() {
      var corrCodeArray = retrieveCorrCodes();
      $(".js-example-basic-multiple").select2({
          maximumSelectionLength: 4,
          data: corrCodeArray
      });    
      

      }

      注意:当我使用 $("#selectReportPeriod") 这样的 select2 元素名称而不是 $(".js-example-basic-multiple") 时,它不起作用,所以我使用了类名。

      【讨论】:

        【解决方案4】:

        这对我有用:

        $("#company_dealer").val('Newly Selected Dealer').trigger('change');
        

        【讨论】:

        • 这不能回答问题