那些遇到过的问题

如何设置jquery select2的选定值？

Cle*_*oth 86 javascript php ajax jquery jquery-select2

这属于select2版本4之前的代码

我有一个简单的代码,select2从ajax获取数据

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});
Run Code Online (Sandbox Code Playgroud)

此代码正常工作,但是,我需要在其上设置一个值,就像在编辑模式下一样.当用户第一次选择一个值时,它将被保存,当他需要编辑该值时,它必须出现在同一个选择菜单(select2)中,以选择之前选择的值,但我找不到方法.

更新:

HTML代码:

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">
Run Code Online (Sandbox Code Playgroud)

Select2编程访问不适用于此.

tom*_*rod 71

SELECT2 <V4

第一步:HTML

<input name="mySelect2" type="hidden" id="mySelect2">
Run Code Online (Sandbox Code Playgroud)

步骤2:创建Select2的实例

$("#mySelect2").select2({
      placeholder: "My Select 2",
      multiple: false,
      minimumInputLength: 1,
      ajax: {
          url: "/elements/all",
          dataType: 'json',
          quietMillis: 250,
          data: function(term, page) {
              return {
                  q: term,
              };
          },
          results: function(data, page) {
              return {results: data};
          },
          cache: true
      },
      formatResult: function(element){
          return element.text + ' (' + element.id + ')';
      },
      formatSelection: function(element){
          return element.text + ' (' + element.id + ')';
      },
      escapeMarkup: function(m) {
          return m;
      }
});
Run Code Online (Sandbox Code Playgroud)

步骤3:设置您想要的值

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});
Run Code Online (Sandbox Code Playgroud)

如果您使用没有AJAX的select2,您可以执行以下操作:

<select name="mySelect2" id="mySelect2">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>
Run Code Online (Sandbox Code Playgroud) 
/* //////////// "One" will be the selected option */
$('[name=mySelect2]').val("0");
Run Code Online (Sandbox Code Playgroud)

你也可以这样做:

$("#mySelect2").select2("val", "0");
Run Code Online (Sandbox Code Playgroud)

SELECT2 V4

对于select2 v4,您可以直接附加选项/ s,如下所示:

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
    <option value="TheID" selected="selected">The text</option>                                                                   
</select>
Run Code Online (Sandbox Code Playgroud)

或者使用JQuery:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")

$("#myMultipleSelect2").append($newOption).trigger('change');
Run Code Online (Sandbox Code Playgroud)

其他例子

$("#myMultipleSelect2").val(5).trigger('change');
Run Code Online (Sandbox Code Playgroud)

  • **触发('改变');**是重要的部分 (2认同)
  • 因 .trigger('change') 受到赞扬 (2认同)

An *_*han 54

要动态设置Select2组件的"selected"值:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
Run Code Online (Sandbox Code Playgroud)

其中第二个参数是具有预期值的对象.

更新:

这确实有效,只是想注意在新的select2中,"a_key"是标准select2对象中的"text".所以:{id: 100, text: 'Lorem Ipsum'}

例: 

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});
Run Code Online (Sandbox Code Playgroud)

感谢@NoobishPro

  • Select2 v4:`$('#inputID').val(100).trigger('change')`参见http://select2.github.io/options.html#what-events-does-select2-listen-for (18认同)
  • 这确实有效,只是想注意在新的select2中,"a_key"是标准select2对象中的"text".所以:{id:100,文字:'Lorem Ipsum'} (6认同)
  • 我用v4这样做,这是行不通的. (5认同)
  • 同样在这里v4.把头发拉到这个上面.如果没有JavaScript解决方案,我认为这是不可能的.现在寻找另一个jQuery/Bootstrap Select2下拉列表(2天摆弄每一个可以想象的方法 - 没有快乐!) (2认同)

Ahm*_*neh 20

HTML:

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

$("#lang").select2().select2('val','asp');
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

  • 使用ajax时,这似乎不起作用. (5认同)
  • 如何通过文本而不是val设置 (2认同)

Nab*_*.Z. 15

同样在我尝试的时候,当在select2中使用ajax时,在select2 中设置新值的编程控制方法对我来说不起作用!现在我编写这些代码来解决问题:

$('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2
Run Code Online (Sandbox Code Playgroud)

您可以在此链接中测试完整的示例代码:https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
在此示例代码中有一个ajax select2,您可以使用按钮设置新值.

$("#btn").click(function() {
  $('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
      .val("20") //set value for option to post it
      .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2
});

$("#sel").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">

<select id="sel" multiple="multiple" class="col-xs-5">
</select>

<button id="btn">Set Default</button>
Run Code Online (Sandbox Code Playgroud)

  • 单调乏味,但是,就像每个人都发现Select2 v4一样,根本无法做出如设置默认选择那么荒谬的事情 (2认同)

小智 13 

var $option = $("<option selected></option>").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');
Run Code Online (Sandbox Code Playgroud)

试试这个追加然后选择.在AJAX调用时不重复该选项.

Mos*_*Feu 8

在当前版本中select2- v4.0.1您可以设置如下值:

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

using "trigger(change)"
<select class="js-example-programmatic">
  <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>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

using destroy: 
<select class="js-example-programmatic">
  <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>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

<button class="js-programmatic-set-val">set value</button>
Run Code Online (Sandbox Code Playgroud)

Ash*_*shi 7

我确实喜欢这个

$("#drpServices").select2().val("0").trigger("change");
Run Code Online (Sandbox Code Playgroud)

  • 请提供一些说明，以帮助用户理解您的代码如何工作并回答OP的问题。 (2认同)

Ahm*_*neh 6

我认为你需要initSelection功能

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id !== "") {
      $.ajax("ajax.php/get_where", {
        data: {programid: id},
        dataType: "json"
      }).done(function (data) {
        $.each(data, function (i, value) {
          callback({"text": value.text, "id": value.id});
        });
        ;
      });
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});
Run Code Online (Sandbox Code Playgroud)

小智 6

对于Ajax，请使用$(".select2").val("").trigger("change")。那应该解决问题。

Nav*_*nDA 5

的HTML

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>
Run Code Online (Sandbox Code Playgroud)

JS

 $("#lang").select2().val('php').trigger('change.select2');
Run Code Online (Sandbox Code Playgroud)

来源：https : //select2.github.io/options.html

Aka*_*rma 5

在Select2 V.4中

使用 $('selector').select2().val(value_to_select).trigger('change');

我认为应该可以

man*_*tel 5

设置值并立即触发更改事件。

$('#selectteam').val([183,182]).trigger('change');
Run Code Online (Sandbox Code Playgroud)

小智 5 

$('#inputID').val("100").select2();
Run Code Online (Sandbox Code Playgroud)

select2选择当前选择之一后申请会更合适。

归档时间：

查看次数：

282511 次

最近记录：

5 年，11 月 前
等到所有jQuery Ajax请求都完成了？ 644
如何在输入框上设置默认值,并在其上初始化select2 25
更多相关链接
相关归档
Laravel:PDOException:找不到驱动程序 32
如何使用preg_match测试空格？ 27
信息日志的PHP error_log的等价物？ 27
如何在Laravel 5中为phpunit指定不同的.env文件？ 22
使用jQuery步骤进入自定义步骤 20
删除父元素,但在HTML中使用jquery保留子元素 19
Web开发:localStorage与缓存的HTTP 12
为什么Onblur不工作(JQuery/Javascript) 5
使用laravel 5中的ajax从表中删除记录 5
查看 Chrome 网络响应中的 JSON 5
难疑归档
Java是"通过引用传递"还是"传递价值"？ 6270
package.json中的波浪号(〜)和插入符号(^)有什么区别？ 3111
设置JavaScript函数的默认参数值 2277
当键盘出现时 - 如何开始编辑时,如何让UITextField向上移动？ 1674
正确使用IDisposable接口 1586
从字典中删除元素 1243
将项目导入Eclipse后,"必须覆盖超类方法"错误 1223
对于Android Studio项目,我的.gitignore应该是什么？ 1210
如何向给定元素添加类？ 1109
我怎么知道分支是否已经合并为主分支？ 1077