Select2 编辑所选选项的值答案

【问题标题】：Select2 edit value of selected optionSelect2 编辑所选选项的值
【发布时间】：2016-06-24 08:13:41
【问题描述】：

我想编辑选项文本和值选择。

<select id="sel">
  <option value="Option one">Option one</option>
  <option value="Option two">Option two</option>
  <option value="Option three">Option three</option>
  <option value="Option four">Option four</option>
</select>

$("#sel").select2({
  width: 400,
  tags: true
});

假设我选择了Option one，我想将其编辑为First Option，包括文本和值。我该怎么做？

之后应该是这样的

<select id="sel">
      <option value="First option">First option</option>
      <option value="Option two">Option two</option>
      <option value="Option three">Option three</option>
      <option value="Option four">Option four</option>
</select>

类似的东西。之前是tEST，之后是tEDT EDIT，而这一切我都想用select2的输入来做

【问题讨论】：

标签： javascript html select2

【解决方案1】：

我的问题已经解决了

var s = $("#sel").select2({
  tags: true,
  closeOnSelect: false,
  width: 400,

});

var $search = s.data('select2').dropdown.$search || $el.data('select2').selection.$search;

s.on("select2:selecting", function(e) {
  $search.val(e.params.args.data.text);
});

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



<select id="sel">
  <option value="Option one">Option one</option>
  <option value="Option two">Option two</option>
  <option value="Option three">Option three</option>
  <option value="Option four">Option four</option>
</select>

【讨论】：

`$el.data('select...` 中的el 是什么？

【解决方案2】：

试试这个：

$('#sel').click(function() {
  var selectedOption = $(this).children("option").filter(":selected");
  
  if (selectedOption.val() === 'Option one') {
      selectedOption.text('First Option');
      selectedOption.attr('value', 'First option');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="sel">
  <option value="Option one">Option one</option>
  <option value="Option two" selected="1">Option two</option>
  <option value="Option three">Option three</option>
  <option value="Option four">Option four</option>
</select>

【讨论】：

【解决方案3】：

您可以像这样使用内置的更改事件：

$("#sel").select2({
  width: 400,
  tags: true
}).on("change", function (e) {
   var elem = $("#sel");
   if( elem.val() == "Option one" ){
      $('#sel option:contains("Option one")').val('First option').text('First option');
      elem.select2("destroy");
            elem.select2({
        width: 400,
        tags: true
      });
   }
});

这里是小提琴：https://jsfiddle.net/9aotj2or/17/

【讨论】：