select2/docs/_includes/options-new/core/data-attributes.html

<section>
  <h2 id="data-attributes">
    Can I declare my configuration within the HTML?
  </h2>
  
  <p>
    It is recommended that you declare your configuration options for Select2
    when initializing Select2. You can also define your configuration options
    by using the HTML5 <code>data-*</code> attributes, which will override
    any options set when initializing Select2 and any defaults.
  </p>
  
  <h3>
    How should <code>camelCase</code> options be written?
  </h3>
  
  <p>
    This means that if you declare your <code>&lt;select&gt;</code> tag as...
  </p>

<pre class="prettyprint">
&lt;select data-tags="true" data-placeholder="Select an option"&gt;&lt;/select&gt;
</pre>

  <p>
    Will be interpreted the same as initializing Select2 as...
  </p>

<pre class="prettyprint linenums">
$("select").select2({
  tags: "true",
  placeholder: "Select an option"
});
</pre>
  
  <h3>
    Are options with nested configurations supported?
  </h3>
  
  <p>
    You can also define nested configurations, which are typically needed for
    options such as AJAX. Each level of nesting should be separated by two
    dashes (<code>--</code>) instead of one. Due to
    <a href="https://github.com/jquery/jquery/issues/2070">a jQuery bug</a>,
    nested options using <code>data-*</code> attributes
    <a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
  </p>

<pre class="prettyprint">
&lt;select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"&gt;&lt;/select&gt;
</pre>

  <p>
    Which will be interpreted the same as initializing Select2 with...
  </p>

<pre class="prettyprint linenums">
$("select").select2({
  ajax: {
    url: "http://example.org/api/test",
    cache: "true"
  }
});
</pre>

  <p>
    The value of the option is subject to jQuery's
    <a href="https://api.jquery.com/data/#data-html5">parsing rules</a> for
    HTML5 data attributes.
  </p>
</section>