javascript - Select2 edit value of selected option - Stack Overflow

admin管理员组

文章数量:1302328

I want to edit option text and value selecting.

<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
});

Let's say I select Option one, and I want to edit it to First Option, both text and value. How can I do it?

After it should looks like

<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>

Something like this. Before was tEST after tEDT EDIT, and all this I want to do with input of select2

I want to edit option text and value selecting.

<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
});

Let's say I select Option one, and I want to edit it to First Option, both text and value. How can I do it?

After it should looks like

<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>

Something like this. Before was tEST after tEDT EDIT, and all this I want to do with input of select2

• javascript
• html
• jquery-select2

Share Follow edited Jun 24, 2016 at 8:41 Adizbek Ergashev asked Jun 24, 2016 at 8:13 Adizbek ErgashevAdizbek Ergashev 76988 silver badges1818 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I have solve my problem

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.0/js/select2.js"></script>
<link href="https://cdnjs.cloudflare./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>

Try this:

$('#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./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>

You can use the built-in change event like this :

$("#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
      });
   }
});

Here is the fiddle : https://jsfiddle/9aotj2or/17/

本文标签： javascriptSelect2 edit value of selected optionStack Overflow