When I use a select2 (input) in bootstrap modal, I can&#39;t type anything into it. It&#39;s like disabled? Outside the modal select2 works fine.

![enter image description here][1]

Working example: http://jsfiddle.net/byJy8/1/
code:

    &lt;!-- Modal --&gt;
    &lt;div id=&quot;myModal&quot; class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&#215;&lt;/button&gt;
            &lt;h3 id=&quot;myModalLabel&quot;&gt;Panel&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot; style=&quot;max-height: 800px&quot;&gt;          
          &lt;form class=&quot;form-horizontal&quot;&gt;
            &lt;!-- Text input--&gt;
            &lt;div class=&quot;control-group&quot;&gt;
                &lt;label class=&quot;control-label&quot; for=&quot;vdn_number&quot;&gt;Numer&lt;/label&gt;
                &lt;div class=&quot;controls&quot;&gt;
                    &lt;!-- seleect2 --&gt;
                    &lt;input name=&quot;vdn_number&quot; type=&quot;hidden&quot; id=&quot;vdn_number&quot;  class=&quot;input-large&quot; required=&quot;&quot;  /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;    
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;button class=&quot;btn&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Close&lt;/button&gt;
            &lt;button class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

JS
--

    $(&quot;#vdn_number&quot;).select2({
        placeholder: &quot;00000&quot;,
        minimumInputLength: 2,
        ajax: {
            url: &quot;getAjaxData/&quot;,
            dataType: &#39;json&#39;,
            type: &quot;POST&quot;,
            data: function (term, page) {
                return {
                    q: term, // search term
                    col: &#39;vdn&#39;
                };
            },
            results: function (data) { // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                return {results: data};
            }
        }
    });

answers:

here you can find a quick [fix][2]

and here is &#39;the right way&#39;: https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal/19574076#19574076


  [1]: http://i.stack.imgur.com/h0I0M.jpg
  [2]: https://stackoverflow.com/a/18487440/1251563

Select2 doesn&#39;t work when embedded in a bootstrap modal

How do I set the placeholder on value reset by select2. In my example If locations or grade select boxes are clicked and my select2 has a value than the value of select2 should reset and show the default placeholder. This script is resetting the value but won&#39;t show the placeholder

    $(&quot;#locations, #grade &quot;).change(function() {
       $(&#39;#e6&#39;).select2(&#39;data&#39;, {
         placeholder: &quot;Studiengang w&#228;hlen&quot;,
         id: null,
         text: &#39;&#39;
       });
    });

    $(&quot;#e6&quot;).select2({
       placeholder: &quot;Studiengang w&#228;hlen&quot;,
       width: &#39;resolve&#39;,
       id: function(e) {
         return e.subject;
       },
       minimumInputLength: 2,
       ajax: {
         url: &quot;index.php?option=com_unis&amp;task=search.locator&amp;tmpl=component&amp;&lt;?php echo JSession::getFormToken() ?&gt;=1&quot;,
         dataType: &#39;json&#39;,
         data: function(term, page) {
           return {
             q: term, // search term
             g: $(&#39;#grade option:selected&#39;).val(),
             o: $(&#39;#locations option:selected&#39;).val()
           };
         },
         results: function(data, page) {
           return {
             results: data
           };
         }
       },
       formatResult: subjectFormatResult,
       formatSelection: subjectFormatSelection,
       dropdownCssClass: &quot;bigdrop&quot;,
       escapeMarkup: function(m) {
         return m;
       }
    });


Reset select2 value and show placeholder

For my more significant selects, the search box in Select2 is wonderful. However, in one instance, I have a simple selection of 4 hard-coded choices. In this case, the search box is superfluous and looks a little silly being present. Is it possible to hide it somehow? I took a look through the documentation online and couldn&#39;t find any options for this in the constructor.

I could, of course, just use a regular HTML select, but for consistency, I&#39;d like to use Select2 if possible.

select2 - hiding the search box

I have problem making this plunkr (select2 + angulat-ui) work.

[http://plnkr.co/edit/NkdWUO?p=preview][1]

In local setup, I get the select2 work, but I cannot set the width as described in the [docs][2]. It is too narrow to be used.

![enter image description here][3]

Thank you.

EDIT:
Never mind that plnkr, I found a working fiddle here
[http://jsfiddle.net/pEFy6/][4]

It looks like it is the behavior of select2 to collapse to the width of first element. I could set the width through bootstrap `class=&quot;input-medium&quot;` .Still not sure why angular-ui doesn&#39;t take config parameters.

  [1]: http://plnkr.co/edit/NkdWUO?p=preview
  [2]: http://angular-ui.github.com/#directives-select2
  [3]: http://i.stack.imgur.com/VXKNn.png
  [4]: http://jsfiddle.net/pEFy6/

set the width of select2 input (through Angular-ui directive)

[Chosen][2] and [Select2][1] are the two more popular libraries for extending selectboxes.

Both seem to be actively maintained, Chosen is older and supports both jQuery and Prototype.

Select2 is jQuery only, its documentation says Select2 is inspired by Chosen, but doesn&#39;t detail any improvements made (if any) or other reasons for the rewrite.

Two libraries have pretty much same feature set, the only comparison I&#39;ve found is a somewhat inconclusive jsperf test page.

Does any of these libraries have any advantages over the other?


  [1]: http://ivaynberg.github.com/select2/
  [2]: http://harvesthq.github.com/chosen/

What are the differences between Chosen and Select2?

This belong to codes prior to Select2 version 4

I have a simple code of `select2` that get data from AJAX.

    

&lt;!-- language: lang-js --&gt;

    $(&quot;#programid&quot;).select2({
      placeholder: &quot;Select a Program&quot;,
      allowClear: true,
      minimumInputLength: 3,
      ajax: {
        url: &quot;ajax.php&quot;,
        dataType: &#39;json&#39;,
        quietMillis: 200,
        data: function (term, page) {
          return {
            term: term, //search term
            flag: &#39;selectprogram&#39;,
            page: page // page number
          };
        },
        results: function (data) {
          return {results: data};
        }
      },
      dropdownCssClass: &quot;bigdrop&quot;,
      escapeMarkup: function (m) { return m; }
    });


This code is working, however, I need to set a value on it as if in edit mode. When user select a value first time, it will be saved and when he needs to edit that value it must appear in the same select menu (`select2`) to select the value previously selected but I can&#39;t find a way. 

UPDATE:

The HTML code:

    &lt;input type=&quot;hidden&quot; name=&quot;programid&quot; id=&quot;programid&quot; class=&quot;width-500 validate[required]&quot;&gt;

[Select2 programmatic access][1] does not work with this.


  [1]: https://select2.github.io/select2/#programmatic

How to set selected value of jQuery Select2?

I want to have a dropdown with a set of values but also allow the user to &quot;select&quot; a new value not listed there. 

I see that [select2][1] supports this if you are using it in `tags` mode, but is there a way to do it without using tags?

  [1]: http://ivaynberg.github.com/select2/#documentation%20select2

Select2 dropdown but allow new values by user?

Trying to use Select2 and getting this error on multiple item input/text field:

    &quot;query function not defined for Select2 undefined error&quot;

&quot;query function not defined for Select2 undefined error&quot;

I am looking for an alternative to Select2 that basically provides the same functionality, but  includes proper tests.

The quest for the holy grail? The last unicorn?

Is there a properly tested alternative to Select2 or Chosen?

Hello friends this is my code:

    &lt;select id=&#39;first&#39;&gt;
      &lt;option value=&#39;1&#39;&gt; First  &lt;/option&gt;
      &lt;option value=&#39;2&#39;&gt; Second &lt;/option&gt;
      &lt;option value=&#39;3&#39;&gt; Three  &lt;/option&gt;
    &lt;/select&gt;

This is my select2 code:

    $(&quot;#first&quot;).select2();

Below is code for getting selected value.

    
    $(&quot;#first&quot;).select2(&#39;val&#39;); // It returns first,second,three.

This is return a text like `first,second,three` and I want to get `1,2,3`.  
Means I need the value of select box, not text.

jQuery select2 get value of select tag?

I have a select2 v4.0.0 being populated from an Ajax array. If I set the val of the select2 I can see via javascript debugging that it has selected the correct item (#3 in my case), however this is not shown in the select box, it is still showing the placeholder.
![enter image description here][1]


Whereas I should be seeing something like this:
![enter image description here][2]

In my form fields:

    &lt;input name=&quot;creditor_id&quot; type=&quot;hidden&quot; value=&quot;3&quot;&gt;
    &lt;div class=&quot;form-group minimal form-gap-after&quot;&gt;
        &lt;span class=&quot;col-xs-3 control-label minimal&quot;&gt;
            &lt;label for=&quot;Creditor:&quot;&gt;Creditor:&lt;/label&gt;
        &lt;/span&gt;
        &lt;div class=&quot;col-xs-9&quot;&gt;
            &lt;div class=&quot;input-group col-xs-8 pull-left select2-bootstrap-prepend&quot;&gt;
                &lt;select class=&quot;creditor_select2 input-xlarge form-control minimal select2 col-xs-8&quot;&gt;
                    &lt;option&gt;&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

My javascript:

    var initial_creditor_id = &quot;3&quot;;
    $(&quot;.creditor_select2&quot;).select2({
        ajax: {
           url: &quot;/admin/api/transactions/creditorlist&quot;,
           dataType: &#39;json&#39;,
           delay: 250,
           data: function (params) {
               return {
                    q: params.term,
                    c_id: initial_creditor_id,
                    page: params.page
               };
           },
           processResults: function (data, page) {
                return {
                    results: data
                };
           },
           cache: true
       },
       placeholder: &quot;Search for a Creditor&quot;,
       width: &quot;element&quot;,
       theme: &quot;bootstrap&quot;,
       allowClear: true
       }).on(&quot;select2:select&quot;, function (e) {
          var selected = e.params.data;
          if (typeof selected !== &quot;undefined&quot;) {
               $(&quot;[name=&#39;creditor_id&#39;]&quot;).val(selected.creditor_id);
               $(&quot;#allocationsDiv&quot;).hide();
               $(&quot;[name=&#39;amount_cash&#39;]&quot;).val(&quot;&quot;);
               $(&quot;[name=&#39;amount_cheque&#39;]&quot;).val(&quot;&quot;);
               $(&quot;[name=&#39;amount_direct&#39;]&quot;).val(&quot;&quot;);
               $(&quot;[name=&#39;amount_creditcard&#39;]&quot;).val(&quot;&quot;);
            }
        }).on(&quot;select2:unselecting&quot;, function (e) {
            $(&quot;form&quot;).each(function () {
                this.reset()
            });
            (&quot;#allocationsDiv&quot;).hide();
            $(&quot;[name=&#39;creditor_id&#39;]&quot;).val(&quot;&quot;);
        }).val(initial_creditor_id);

How can I make the select box show the selected item rather than the placeholder? Should I be sending this as part of the AJAX JSON response perhaps?

In the past, Select2 required an option called initSelection that was defined whenever a custom data source was being used, allowing for the initial selection for the component to be determined. This worked fine for me in v3.5.


  [1]: http://i.stack.imgur.com/Avj4C.png
  [2]: http://i.stack.imgur.com/gwBZa.png

How can I set the initial value of Select2 when using AJAX?

My [Select2](http://ivaynberg.github.io/select2/) 3.4.5 is not working with JSON data.

Here is my input box on HTML:

    &lt;input class=&#39;form-control col-lg-5 itemSearch&#39; type=&#39;text&#39; placeholder=&#39;select item&#39; /&gt;

…and my JavaScript

    $(&quot;.itemSearch&quot;).select2({
        placeholder: &quot;Search for an Item&quot;,
        minimumInputLength: 2,
        ajax: {
            url: &quot;/api/productSearch&quot;,
            dataType: &#39;json&#39;,
            quietMillis: 100,
            data: function (term, page) {
                return {
                    option: term
                };
            },
            results: function (data, page) {
                var more = (page * 10) &lt; data.total;
                return {
                    results: data.itemName,
                    more: more
                };
            }
        },
        formatResult: function (data, term) {
            return data;
        },
        formatSelection: function (data) {
            return data;
        },
        dropdownCssClass: &quot;bigdrop&quot;,
        escapeMarkup: function (m) {
            return m;
        }
    });

I made an API with Laravel 4 which returns a value whenever I type anything on my text box.

Here&#39;s the result if I type &quot;test&quot; on my text box:

    [{&quot;itemName&quot;:&quot;Test item no. 1&quot;,&quot;id&quot;:5},
    {&quot;itemName&quot;:&quot;Test item no. 2&quot;,&quot;id&quot;:6},
    {&quot;itemName&quot;:&quot;Test item no. 3&quot;,&quot;id&quot;:7},
    {&quot;itemName&quot;:&quot;Test item no. 4&quot;,&quot;id&quot;:8},
    {&quot;itemName&quot;:&quot;Test item no. 5&quot;,&quot;id&quot;:9},
    {&quot;itemName&quot;:&quot;Test item no. 6&quot;,&quot;id&quot;:10},
    {&quot;itemName&quot;:&quot;Test item no. 7&quot;,&quot;id&quot;:11}]

I can&#39;t add the result to my Select2 dropdown. I think `formatSelection` and `formatResult` are causing the problem because I don&#39;t know what parameter should be placed on it. I don&#39;t know where to get those parameters like container, object and query and the values it should be returning, or is my JSON response is wrong?

How to use Select2 with JSON via Ajax request?

I love the select2 box from https://github.com/ivaynberg/select2
I am using the format: option to format each element, and it looks great.

Everything is fine except the selected element is bigger than the height of the select box due to an image.

I know how to change the width, but how do I change the height so that AFTER the element is selected, it shows the full thing (about 150px)

Here is my initiation:

	&lt;script&gt;
		$(&quot;#selboxChild&quot;).select2({
			matcher: function(term, text) { 
				var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text); 
				return t.toUpperCase().indexOf(term.toUpperCase()) &gt;= 0; 
			},
			formatResult: formatChild,
			formatSelection: formatChild,
			escapeMarkup: function(m) {
				return m;
			}
		});
	&lt;/script&gt;

and here is my select box

	&lt;select id=&quot;selboxChild&quot; style=&quot;width: 300px; height: 200px&quot;&gt;
	    &lt;option value=&quot;&quot;&gt;No child attached&lt;/option&gt;
	&lt;/select&gt;


**To Clarify: I do NOT want the Height of each option to change**
I am looking for the select box to change height after you select a child.

So when the page first loads it says &quot;No child selected&quot;
When you click the drop down and select a child you see the child&#39;s image.
NOW i need the select box to expand! Otherwise the picture of the child is cut off.

Does anyone understand?

How do I change select2 box height

I am using the select2 control, [loading data][1] via ajax. This requires the use of the `&lt;input type=hidden..&gt;` tag.

Now, I want to retrieve the selected text. (The `value` property in the `data-bind` expression sotres the `id` only)

I have tried `$(&quot;.select2-chosen&quot;).text()`, but this breaks when I have multiple select2 controls on the page.


  [1]: http://ivaynberg.github.io/select2/#data

How to get Selected Text from select2 when using &lt;input&gt;

I am using [select2 library](https://select2.github.io/) for my search.  
is there any way to trigger an action after selecting a search result? e.g. open a popup, or a simple js alert.  
  

	$(&quot;#e6&quot;).select2({
		placeholder: &quot;Enter an item id please&quot;,
		minimumInputLength: 1,
		ajax: { // instead of writing the function to execute the request we use Select2&#39;s convenient helper
			url: &quot;index.php?r=sia/searchresults&quot;,
			dataType: &#39;jsonp&#39;,
			quietMillis: 3000,
			data: function (term, page) {
			return {
				q: term, // search term
				page_limit: 10,
				id: 10
				};
			},
			results: function (data, page) { // parse the results into the format expected by Select2.
				// since we are using custom formatting functions we do not need to alter remote JSON data
				return {results: data};
			},
		},

		formatResult: movieFormatResult, // omitted for brevity, see the source of this page
		formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
		dropdownCssClass: &quot;bigdrop&quot;, // apply css that makes the dropdown taller
		escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
	});



Trigger an action after selection select2

I am doing tagging with [select2][1]

I have these requirements with select2:

1. I need to search some tags using select2 ajax
2. Also I need to use &quot;tags&quot; in select2 which Allows values that are not in the list(Ajax result).

Both the scenarios work independently. But joined together aJax values are only populated. If we type any other values not in the list then it says &quot;no matches found&quot;

My scenario If user type any new value which is not in the list, allow them to make up their own tag.

Any way to make this work?


  [1]: http://ivaynberg.github.com/select2/#tags

Tagging with AJAX in select2

I have two selects that are linked: Each value of the first select determines which items will be displayed in the second select.

The values of the second select are stored in a two-dimension array:

    [ [{&quot;id&quot;:1,&quot;text&quot;:&quot;a&quot;}, {&quot;id&quot;:2,&quot;text&quot;:&quot;b&quot;},...],
      [{&quot;id&quot;:&quot;1a&quot;,&quot;text&quot;:&quot;aa&quot;},{&quot;id&quot;:&quot;1b&quot;,&quot;text&quot;:&quot;ba&quot;},...],
      ...
    ]

The first select value determines the index to be used to populate the second select. So in a &#39;change&#39; event on the first I should be able to modify the items select-two contains.

Reading documentation I think I need to use the &quot;data&quot; option... but not shure how as the example loads the array data on initialization and it seems to don&#39;t work if I try to do the same after initialization.


**HTML**

    Attribute:
    &lt;select name=&quot;attribute&quot; id=&quot;attribute&quot;&gt;
        &lt;option value=&quot;0&quot;&gt;Color&lt;/option&gt;
        &lt;option value=&quot;1&quot;&gt;Size&lt;/option&gt;
    &lt;/select&gt;
     
    Value:
    &lt;select name=&quot;value&quot; id=&quot;value&quot;&gt;&lt;/select&gt;

    &lt;script&gt;
       var data = [ [{&quot;id&quot;:1,&quot;text&quot;:&quot;black&quot;}, {&quot;id&quot;:2,&quot;text&quot;:&quot;blue&quot;},...],
                    [{&quot;id&quot;:&quot;1&quot;,&quot;text&quot;:&quot;9&quot;},{&quot;id&quot;:&quot;1&quot;,&quot;text&quot;:&quot;10&quot;},...],
                  ];
       $(&#39;#attribute&#39;).select2().bind(&#39;change&#39;, function(){
          // Here I need to change `#value` items.
          $(&#39;#value&#39;).select2(&#39;data&#39;,data[$(this).val()]);  // This does not work
       );

       $(&#39;#value&#39;).select2();
    &lt;/script&gt;

select2 changing items dynamically

Ok, I&#39;m sure there&#39;s something simple set wrong here but I&#39;m not 100% what it is.

So I am trying to use [Select2](http://ivaynberg.github.com/select2/) AJAX method as a way of users to search a database and select a result.  The call itself is coming back with results, however it will not allow me to select the answer from the list.  It also doesn&#39;t seem to allow you to &quot;select&quot; it on hover or up/ down arrow.  So without further ado, here is my code:

### index.html ###

    &lt;html&gt;
    	&lt;head&gt;
    		&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    		&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;select2/select2.css&quot; media=&quot;screen&quot; /&gt;
    		&lt;script src=&quot;select2/select2.js&quot;&gt;&lt;/script&gt;
    		&lt;script src=&quot;select.js&quot;&gt;&lt;/script&gt;
    	&lt;/head&gt;
    	&lt;body&gt;
    		&lt;input type=&quot;text&quot; style=&quot;width: 500px&quot; class=&quot;select2&quot;&gt;
    	&lt;/body&gt;
    &lt;/html&gt;

### select.js ###
    jQuery(function() {
    
      var formatSelection = function(bond) {
        console.log(bond)
        return bond.name
      }
    
      var formatResult = function(bond) {
        return &#39;&lt;div class=&quot;select2-user-result&quot;&gt;&#39; + bond.name + &#39;&lt;/div&gt;&#39;
      }
    
      var initSelection = function(elem, cb) {
        console.log(elem)
        return elem
      }
    
    	$(&#39;.select2&#39;).select2({
          placeholder: &quot;Policy Name&quot;,
          minimumInputLength: 3,
          multiple: false,
          quietMillis: 100,
          ajax: {
            url: &quot;http://localhost:3000/search&quot;,
            dataType: &#39;json&#39;,
            type: &#39;POST&#39;,
            data: function(term, page) {
              return {
                search: term,
                page: page || 1
              }
            },
            results: function(bond, page) {
              return {results: bond.results, more: (bond.results &amp;&amp; bond.results.length == 10 ? true: false)}
            }
          },
          formatResult: formatResult,
          formatSelection: formatSelection,
          initSelection: initSelection
        })
    })

### JSON Response ###

    {
      error: null,
      results: [
        {
          name: &#39;Some Name&#39;,
          _id: &#39;Some Id&#39;
        },
        {
          name: &#39;Some Name&#39;,
          _id: &#39;Some Id&#39;
        }
      ]
    }

Everything seems to pull in correctly, however I am unable to actually select the answer and have it input into the box.  Is there a problem somewhere in my code?

Select2 Ajax Method Not Selecting

I want to be able to set the default/selected value of a select element using the JQuery Select2 plugin.

JQuery select2 set default value from an option in list?

I am trying to make a select2 box appear in its *focused* state on page load. I have tried the following:

    $(&#39;#id&#39;).select2(&#39;focus&#39;);
    $(&#39;#id&#39;).trigger(&#39;click&#39;);
    $(&#39;#id&#39;).trigger(&#39;focus&#39;);

Only the first line seems to have any effect, and it does focus the select2 field, however it requires an additional keypress to display the search field, and to allow typing in search string.

Therefore, if you load the page and start typing: &quot;Search&quot;, the &quot;S&quot; will open the search box and then the remainder of the keys will be entered into it, so you&#39;ll be searching &quot;earch&quot;



select2 force focus on page load

So i have downloaded select2 i have &quot;installed it&quot; by putting it into my folder and then loaded it on my site when i check the console (where i can see all of the scripts being loaded) i can see the file select2.js

I went to their documentation and copied it and added `    $(&quot;#e9&quot;).select2();
` 

However when i load the page i get the following error:

    TypeError: $(...).select2 is not a function
    	
    
    $(&quot;#e9&quot;).select2();

Have anyone else experianced anything like this?


Additional information here is my script:

        jQuery(document).ready(function(){
        var max_amount = parseFloat($(&#39;#max_amount&#39;).val());
        $( &quot;#item_amount&quot; ).keyup(function() {
               if($(this).val() &gt; max_amount){
                $(this).val( max_amount);
            }
            if( /\D/.test($(this).val()) ){
                alert(&#39;M&#229; kun indeholde tal!&#39;);
                $(this).val(&#39;&#39;);
            }
            if($(this).val()== &#39;0&#39;){
                alert(&#39;M&#229; ikke v&#230;re 0!&#39;);
                $(this).val(&#39;&#39;);
            }
        });
        $(&quot;#e1&quot;).select2();
    
    });
    function addToBasket(){
        var amount = $(&#39;#item_amount&#39;).val();
        if(amount == &quot;&quot;){
            amount = 1;
        }
    
        if(amount &gt; 0){
        $.ajax({
            type: &#39;POST&#39;,
            url: myBaseUrl + &#39;Products/addItemToBasket&#39;,
            dataType: &#39;json&#39;,
            data: {
                id: window.location.pathname.substring(window.location.pathname.lastIndexOf(&#39;/&#39;) + 1),
                amount: amount
            },
            success: function (data) {
                var urlToBasket = myBaseUrl+&#39;Products/basket&#39;;
                var newAmount = parseInt(amount)
                var price = data[0][&#39;Product&#39;][&#39;pris&#39;];
                var id = data[0][&#39;Product&#39;][&#39;id&#39;];
                var dat = data;
                var tmp_basket_html = $(&#39;#basket_amount&#39;).html();
               if($(&#39;#basket_amount&#39;).html() !== &quot; Tom&quot;){
                  $(&#39;#shopping_table_body&#39;).append(
                      &quot;&lt;tr id=&#39;&quot;+id+&quot;&#39;&gt;&quot; +
                          &quot;&lt;td class=&#39;image&#39;&gt;&quot; +
                          &quot;&quot;+
                          &quot;&lt;/td&gt;&quot; +
                          &quot;&lt;td class=&#39;name&#39;&gt;&quot; +
                          &quot; &quot;+data[0][&#39;Product&#39;][&#39;name&#39;] +
                          &quot;&lt;/td&gt;&quot;+
                          &quot;&lt;td class=&#39;quantity&#39;&gt;&quot; +
                          &quot;x &quot;+amount +&quot;&quot;+
                          &quot;&lt;/td&gt;&quot;+
                          &quot;&lt;td class=&#39;total&#39;&gt;&quot; +
                          &quot;&quot;+price*amount+
                          &quot;&lt;/td&gt;&quot; +
                          &quot;&quot;+
                          &quot;&lt;td class=&#39;remove&#39;&gt;&quot; +
                          &quot;&lt;input class=&#39;icon-remove&#39; type=&#39;button&#39; onclick=&#39;removeItemFromBasket(&quot;+id+&quot;)&#39;&gt;&quot;+
                          &quot;&lt;/td&gt;&quot;+
                          &quot;&lt;/tr&gt;&quot;
                  );
               }else{
                   $(&quot;#shopping_menu&quot;).append(
                       &quot;&lt;ul class=&#39;dropdown-menu topcartopen&#39;&gt;&quot;+
                           &quot;&lt;li id=&#39;basket_list&#39;&gt;&quot;+
                          &quot;&lt;table id=&#39;shopping_table&#39;&gt;&quot;+
                            &quot;&lt;tbody id=&#39;shopping_table_body&#39;&gt;&quot;+
                           &quot;&lt;tr id=&#39;&quot;+id+&quot;&#39;&gt;&quot; +
                           &quot;&lt;td class=&#39;image&#39;&gt;&quot; +
                           &quot;&quot;+
                           &quot;&lt;/td&gt;&quot; +
                           &quot;&lt;td class=&#39;name&#39;&gt;&quot; +
                           &quot; &quot;+data[0][&#39;Product&#39;][&#39;name&#39;] +
                           &quot;&lt;/td&gt;&quot;+
                           &quot;&lt;td class=&#39;quantity&#39;&gt;&quot; +
                           &quot;x &quot;+amount +&quot;&quot;+
                           &quot;&lt;/td&gt;&quot;+
                           &quot;&lt;td class=&#39;total&#39;&gt;&quot; +
                           &quot;&quot;+price*amount+
                           &quot;&lt;/td&gt;&quot; +
                           &quot;&quot;+
                           &quot;&lt;td class=&#39;remove&#39;&gt;&quot; +
                           &quot;&lt;input class=&#39;icon-remove&#39; type=&#39;button&#39; onclick=&#39;removeItemFromBasket(&quot;+id+&quot;)&#39;&gt;&quot;+
                           &quot;&lt;/td&gt;&quot;+
                           &quot;&lt;/tr&gt;&quot;+
                           &quot;&lt;/table&gt;&quot;+
                           &quot;&lt;/li&gt;&quot;+
                           &quot;&lt;div class=&#39;well pull-right&#39;&gt;&quot;+
                           &quot;&lt;input type=&#39;button&#39; onclick=&#39;goToBasket()&#39; class=&#39;btn btn-success&#39; value=&#39;Tjek ud&#39;&gt;&quot;+
                           &quot;&lt;/div&gt;&quot;+
                           &quot;&lt;/ul&gt;&quot;
    
                   )
               }
                updateTotal(amount,price);
                updateBasketAmount();
            }
        });
        }
        Notifier.success(&#39;Vare tilf&#248;jet&#39;, &#39;Tilf&#248;jet&#39;); // text and title are both optional.
    }
    function updateTotal(amount, price){
        var price = parseFloat(price);
        var oldValue = parseFloat($(&#39;#basket_total_cost&#39;).html());
        var newPrice = amount*price+oldValue;
        $(&#39;#basket_total_cost&#39;).html(newPrice);
    }
    function updateBasketAmount(){
       var tmp =  $(&#39;#basket_amount&#39;).html();
        if(!isNaN(tmp)){
       var oldAmount = parseInt(tmp.substr(0,2));
        var i = oldAmount + 1;;
        $(&#39;#basket_amount&#39;).html(
            &quot;&quot;+i+&quot; vare(r)&quot;
        );
        }else{
            $(&#39;#basket_amount&#39;).html(
                &quot;1&quot;+&quot; vare(r)&quot;
            );
        }
    }
    function goToBasket(){
        window.location.href = myBaseUrl+&#39;Products/basket&#39;;
    }

Select2() is not a function

I am using Select2 Jquery to  bind  my dropdown  which  is  used  for  multiple   selection . I  am  using  select2 jquery.

It&#39;s  working  fine,  I  can bind  my  dropdown but I  need  to get  the selected  value from my multi-value selector. I am looking for  method  to get  value  which  is  supported  by  select2 Jquery.  it  might  be  having  a  function  get  selected  value.  
my drop  down  binding  code

    $(&quot;.leaderMultiSelctdropdown&quot;).select2( {
        maximumSelectionSize: 4
    });

Get Selected value from Multi-Value Select Boxes by jquery-select2?

I am  binding  my  dropdown  with `Jquery-Select2`.  It&#39;s  working  fine  but  now  I  need  to  bind  my  Multi-Value  `selectBox`   by  using `Jquery-Select2`.

My DropDown  

```html
&lt;div class=&quot;divright&quot;&gt;
  &lt;select
    id=&quot;drp_Books_Ill_Illustrations&quot;
    class=&quot;leaderMultiSelctdropdown Books_Illustrations&quot;
    name=&quot;drp_Books_Ill_Illustrations&quot;
    multiple=&quot;&quot;
  &gt;
    &lt;option value=&quot; &quot;&gt;No illustrations&lt;/option&gt;
    &lt;option value=&quot;a&quot;&gt;Illustrations&lt;/option&gt;
    &lt;option value=&quot;b&quot;&gt;Maps&lt;/option&gt;
    &lt;option value=&quot;c&quot;&gt;Portraits&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
```

From   this  link  &lt;http://ivaynberg.github.com/select2/&gt;     I am  using  Multiple  Value  Select  Box,  I  can  bind  my  dropdown  with 

```js
$(&quot;dropdownid&quot;).Select2()
```
  Its  working  fine,  but  now  I  need  to  get  that  selected  value  into  my  dropdown  on  edit  mode So  I am  using  this  example:
      
```js
$(&quot;.Books_Illustrations&quot;).select2(&quot;val&quot;, [&quot;a&quot;, &quot;c&quot;]);
```
It&#39;s  working  but  how   can I  fix  my  choice,  because  user  can  choose  anything.  So  I  can&#39;t  write  a,c   statically  that&#39;s  why  I  need  to  bind  my  Selected  value  on  Edit  mode  dynamically.

I  think  now  you  all  are  clear  with  my  requirements.  Please  let  me  know  if  you  need  further  clearance.  

How to Set Selected value in Multi-Value Select in Jquery-Select2.?

What would be the best way to reset the selected item to default? I&#39;m using *Select2* library and when using a normal button `type=&quot;reset&quot;`, the value in the dropdown doesn&#39;t reset.

So when I press my button I want &quot;All&quot; to be shown again.

**jQuery**

    $(&quot;#d&quot;).select2();

**html**

    &lt;select id=&quot;d&quot; name=&quot;d&quot;&gt;
      &lt;option selected disabled&gt;All&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
    &lt;/select&gt;

Resetting Select2 value in dropdown with reset button

To get the chosen value of a `select2` I&#39;m using:
    
    var x = $(&quot;#select&quot;).select2(&#39;data&#39;);
    var select_choice = x.text

The problem is this throws an error if not value has been selected and I was wondering if there was any way to make it return the placeholder if no option is selected


How to use placeholder as default value in select2 framework

I&#39;m using jQuery select2 multi select dropdown. I need to select all options in a dropdown from code.
Basically there is a Select All checkbox on which this functionality has to be implemented, I want to select/deselect options from this checkbox.

JQuery Select2 - How to select all options

I have a watch setup against the model of a ui-select2 dropdown (from ui-bootstrap).  The watch fires on load but not on data changes and I can&#39;t figure out why.  

It isn&#39;t the usual problem of not $apply&#39;ing the model change or not using the third parameter for equality comparison (at least from my code).

What do I need to do to get it to fire?

[Here is a plunk demonstrating the issue.][1]


  [1]: http://plnkr.co/edit/xsclxVpkOgpIKwSK4S1d?p=preview

$watch not firing on data change

I have a jQuery Select2 control that uses AJAX to populate:

    &lt;input type=&quot;text&quot; name=&quot;select2&quot; id=&quot;select2&quot; style=&#39;width:400px&#39; value=&quot;999&quot;&gt;

	var initialSelection = { id: &#39;999&#39;, text:&quot;Some initial option&quot;};

    $(&quot;#select2&quot;).select2({
        placeholder: &quot;Select Option&quot;,
        minimumInputLength: 2,
        ajax: { 
            url: &quot;/servletToGetMyData&quot;,
            dataType: &#39;json&#39;,
            data: function (term, page) { return { term: term }; },
            results: function (data, page) {  return { results: data.results} }
        },
        initSelection : function(element, callback){ callback(initialSelection); },	    
        escapeMarkup: function (m) { return m; }
    });	

The AJAX links to a database of possible options and as you can see requires two characters of input.

The problem is the user can use a dialog to add a new option if the option doesn&#39;t exist in the database.  Upon return from that dialog, I try:

	var o = $(&quot;&lt;option/&gt;&quot;, {value: newID, text: newText});
	$(&#39;#select2&#39;).append(o);
	$(&#39;#select2 option[value=&quot;&#39; + newID + &#39;&quot;]&#39;).prop(&#39;selected&#39;,true);
	$(&#39;#select2&#39;).trigger(&#39;change&#39;);

But it doesn&#39;t work.  The same exact code works for non-AJAX Select2 boxes.  I&#39;ve tried various alternatives, like using `$(&#39;#select2&#39;).select2(&quot;val&quot;, newID);` but it doesn&#39;t work.
	
I&#39;ve even tried completely deleting the Select2 control.  However, `$(&#39;#select2&#39;).remove()` only removes the original &amp;lt;input&amp;gt; field but leaves the Select2 control lingering around.  Note that the page has more than one Select2 control, so I can&#39;t use a class selector for Select2 controls as it will remove other controls that I need.

Any idea how to either a) dynamically add an option to a Select2 control that uses AJAX; or b) completely delete a Select2 control so that it can be programmatically added back? Or any other solution...

**Edit**
I found another question that shows how to remove a select2 element, using .select2(&quot;destroy&quot;).  This works but is, in my opinion, sub-optimal.  I would much prefer to be able to just add the option than to destroy and re-create the select2.  

Dynamically add item to jQuery Select2 control that uses AJAX

I&#39;m trying to programmatically clear a drop down using the fantastic [Select2][1] library. The drop down is dynamically filled with a remote ajax call using the Select2 `query` option.

HTML:

    &lt;input id=&quot;remote&quot; type=&quot;hidden&quot; data-placeholder=&quot;Choose Something&quot; /&gt;

Javascript:

            var $remote = $(&#39;#remote&#39;);

            $remote.select2({
                allowClear: true,
                minimumInputLength: 2,
                query: function(options){
                    $.ajax({
                        dataType: &#39;json&#39;,
                        url: myURL + options.term,
                        error: function(jqXHR, textStatus, errorThrown){
                            smoke.alert(textStatus + &quot;: server returned error on parsing arguments starting with &quot; + options.term);
                        },
                        success: function(data, textStatus, jqXHR){
                            var results = [];
                            for(var i = 0; i &lt; data.length; ++i){
                                results.push({id: data[i].id, text: data[i].name});
                            }

                            options.callback({results: results, more: false});
                        }
                    });
                }
            });
            
Unfortunately, the call to `$remove.select2(&#39;val&#39;, &#39;&#39;)` throws the following exception:

     Uncaught Error: cannot call val() if initSelection() is not defined

I&#39;ve tried setting the `attr`, setting the `val`, `text` and the Select2 specific `data` function. Can&#39;t seem to make the guy clear and work in a radio button like manner. Anyone got suggestions?


  [1]: http://ivaynberg.github.com/select2/

Clear dropdown using jQuery Select2

I am using Select2 3.3.2

I have very very long options in the select.
Example:


    &lt;select id=&quot;e1&quot;&gt;
    &lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
    &lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
    &lt;option value=&quot;WY&quot;&gt;very long long long text&lt;/option&gt;
    &lt;option value=&quot;WY&quot;&gt;very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text&lt;/option&gt;
    &lt;/select&gt;

The purpose is to avoid wrapping of the options when the dropdown opens up.

I would like to set long width for the dropdown when it opens up (for example - 800px, or even automatic evaluated width).

But to keep the input with short width when the dropdown is closed (for example 300px).

I followed this [&quot;Add option to set dropdown width&quot;](https://github.com/ivaynberg/select2/issues/328) issue of select2.

But I couldn&#39;t get it to work, the width of the options/dropdown is the same as the input&#39;s width and the options as wrapped to multiple lines.

Here is the demo of my problem in jsfiddle - http://jsfiddle.net/ewwAX/

Thank you all in advance for helping.



select2 - Setting different width to input and dropdown

Say we have a simple `select2` list:

    &lt;select id=&quot;e1&quot;&gt;
      &lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
        ...
      &lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
    &lt;/select&gt;

Initiated like: 

    $(&quot;#e1&quot;).select2();

How can I remove `select2` and return it to a regular dropdown? I can&#39;t find any examples or entry in documentation.

Something like:

    $(&quot;#e1&quot;).select2(&#39;remove&#39;); 

would be nice.



How to remove select2 from dom

I&#39;m using select2 jquery plugin with twitter bootstrap. It&#39;s working fine for smaller number of items. But when the list is huge (more than 1500 items) it really slows down. It&#39;s slowest in IE.

Normal Dropdownlist works very fast with more than 1500 items. Are there any workarounds for this situation?


Select2 performance for large set of items

I am attempting to use the [Select2][1] library in my site to leverage `placecomplete` ([following it&#39;s rather simple configuration steps here][2]), but when I run the code I get a strange error - 

&gt;Error: No select2/compat/query`

I&#39;ve tried googling it and it really seems like no one else has encountered this?

My code in a nutshell is,

loading the files...

    &lt;link href=&quot;scripts/Select2/dist/css/select2.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;script src=&quot;scripts/Select2/dist/js/select2.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;scripts/jquery.placecomplete.js&quot;&gt;//&lt;![CDATA[//]]&gt;&lt;/script&gt;


Tagging an input element in my body...

    &lt;input id=&quot;example123&quot; class=&quot;example123&quot; type=&quot;text&quot; /&gt;

In my document.ready function, calling the following code...

    $(&#39;#example123&#39;).placecomplete({});

and thats where it throws the error.

Any ideas where Im going wrong, and what this error means?

  [1]: https://select2.github.io/
  [2]: https://github.com/stephjang/placecomplete

All Jquery Select2 Solutions on Gang of Coders

Total of 33 Jquery Select2 Solutions

Select2 doesn't work when embedded in a bootstrap modal