jquery select2 setting input value

Question

I have the following input textbox using 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>

which is setupusing select2 like this:

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

Now, I want to set the default values for the text input. I tried the following:

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

and the following:

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

and the following:

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

But the form does not get updated and the input fields are blank. Also, I do not get any errors in the browser console.

Any thoughts on what am i missing here?

Here is a jsfiddle which shows my problem: https://jsfiddle.net/snehilw/90m8hzpg/

First of all, please fix your ``, it does not have a closing tag `` and try to run your code again — AGE, Jan 20 '16 at 21:08
select2 is not for inputs it is for dropdowns of course nothing will be shown in the input.. also you can't pass ("val", "test value"); this isn't php.. you must pass data in JSON format — Ilanus, Jan 20 '16 at 21:08
As said by @IlanHasanov, you can even read it on the **[Select 2 homepage](https://select2.github.io/)**. You can pass the values your input needs via JQuery on the fly after the element has been created. — AGE, Jan 20 '16 at 21:10
@Rookie, can you clarify what you mean by `tags: ["red", "green", "blue"]`? — AGE, Jan 20 '16 at 21:12
I was just trying to see if anything gets populated with tags. that seemed to be an option provided by select2 (http://select2.github.io/select2/). you can look at 'Tagging support' section on that page — Rookie, Jan 20 '16 at 21:13
@Rookie sadly as stated previously, this only works for select boxes. For now adding a default value to your input is as easy as writing: `$("#QRY_Owner).val("test value");` — AGE, Jan 20 '16 at 21:15
$("#QRY_Owner).val("test value"); did not work either. No error messages — Rookie, Jan 20 '16 at 21:16
Here is the jsfiddle which shows my problem: https://jsfiddle.net/snehilw/90m8hzpg/ — Rookie, Jan 20 '16 at 21:32
@Rookie part of the problem is that you want to use an `` with `.select2()` where `.select2()` works with ` — AGE, Jan 20 '16 at 21:42

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

Grabbed from JQuery select2 set default value from an option in list?. Just add:

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

jsfiddle

edited May 23 '17 at 10:27

Community

1
1

answered Jan 20 '16 at 21:34

Artem

823
8
14

[Updated fiddle](https://jsfiddle.net/90m8hzpg/2/) used `.select2('data',[{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}])`, refer to [Creating new tags in a Select2 tag textarea](http://stackoverflow.com/questions/19903353/creating-new-tags-in-a-select2-tag-textarea) – Artem Jan 20 '16 at 21:57

score 1 · Answer 2 · answered Jan 20 '16 at 21:45

Part of the problem is that you want to use an <input> with .select2() where .select2() works with <select> tags, as specified in the select2 docs.

Your JSFiddle is a demonstration of what I just stated. That aside, if you truly want to change the value after all, then what you need to do is re-use the .select2 function (copy/paste) and replace the placeholder attribute in it with whatever text you want like so:

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

Keep in mind, always use $(document).ready with JQuery, it's a best practice.

jquery select2 setting input value

2 Answers2