options.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <section>
  2. <h2 id="options">
  3. How should Select2 be initialized?
  4. </h2>
  5. <p>
  6. Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call <code>.select2()</code> on any jQuery element where you would like to initialize Select2.
  7. </p>
  8. {% highlight js linenos %}
  9. $('select').select2();
  10. {% endhighlight %}
  11. <p>
  12. You can optionally pass an object containing all of the options that you would like to initialize Select2 with.
  13. </p>
  14. {% highlight js linenos %}
  15. $('select').select2({
  16. placeholder: 'Select an option'
  17. });
  18. {% endhighlight %}
  19. <h3 id="setting-default-options">
  20. Can default options be set for all dropdowns?
  21. </h3>
  22. <p>
  23. In some cases, you need to set the default options for all instances of
  24. Select2 in your web application. This is especially useful when you are
  25. migrating from past versions of Select2, or you are using non-standard
  26. options <a href="#amd">like custom AMD builds</a>. Select2 exposes the
  27. default options through <code>$.fn.select2.defaults</code>, which allows
  28. you to set them globally.
  29. </p>
  30. <p>
  31. When setting options globally, any past defaults that have been set will
  32. be overridden. Default options are only used when an option is requested
  33. that has not been set during initialization.
  34. </p>
  35. <p>
  36. <strong>You can set default options</strong> by calling
  37. <code>$.fn.select2.defaults.set("key", "value")</code>.
  38. </p>
  39. {% highlight js linenos %}
  40. $.fn.select2.defaults.set("theme", "classic");
  41. {% endhighlight %}
  42. <h3>
  43. How can I set a default value for a nested option?
  44. </h3>
  45. <p>
  46. The key that is
  47. set should take the same format as keys set using
  48. <a href="#data-attributes">HTML <code>data-*</code> attributes</a> which
  49. means that two dashes (<code>--</code>) will be replaced by a level of
  50. nesting, and a single dash (<code>-</code>) will convert it to a camelCase
  51. string.
  52. </p>
  53. {% highlight js linenos %}
  54. $.fn.select2.defaults.set("ajax--cache", false);
  55. {% endhighlight %}
  56. <h3>
  57. How can I reset all of the global default options?
  58. </h3>
  59. <p>
  60. You can reset the default options to their initial values by calling
  61. </p>
  62. {% highlight js linenos %}
  63. $.fn.select2.defaults.reset();
  64. {% endhighlight %}
  65. </section>