Select2 on change event is not working

Hello,

I'm using Metronic 8 with Symfony but I can't get select2 to work properly.

<select data-hide-search="true" multiple="multiple" data-control="select2" data-placeholder="Budget approximatif" class="form-select form-select-solid" id="filterBudget">
 <option></option>
 {% for value, label in aBudgets %}
 <option value="{{ value }}">{{ label }}</option>
 {% endfor %}
 </select>

Select2 is correctly instantiated correctly and working but the on change event is not triggering.

$("#filterBudget").on("change", function (e) { console.log("select2:select"); });

All metronic sources are correctly loaded in my base twig template like this

<!--begin::Global Javascript Bundle(used by all pages)-->
 <script src="{{ asset("assets/plugins/global/plugins.bundle.js") }}"></script>
 <script src="{{ asset("assets/js/scripts.bundle.js") }}"></script>
 <!--end::Global Javascript Bundle(used by all pages)-->

And then, I load my custom javascript.

<img src="

Thanks for your help

Guest 1 year ago

Webpack Metronic PHP

5 Answers

</div><div class="form-group"><div id="question_reply_captcha_container" class="question_reply_captcha_container"/></div><div class="d-flex align-items-center justify-content-between py-2 mb-0"><div class="text-primary fs-base fw-bold cursor-pointer" data-bs-toggle="collapse" data-bs-target="#select2-on-change-event-is-not-working68609f676b99d"> Text formatting options </div><div class="d-flex ms-2"><label class="form-group form-check form-switch form-check-custom form-check-solid me-6 mb-0" data-bs-toggle="tooltip" title="Private message will be shown only to Support agent."><input type="hidden" name="public" value="1"/><input class="form-check-input" type="checkbox" name="public" value="0"/><span class="form-check-label fs-7 fw-bolder text-gray-800"> Private reply </span></label><button type="reset" class="btn btn-light-primary fw-bold me-3 d-none" data-kt-action="cancel">Cancel</button><a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Submit</a></div></div><div class="collapse" id="select2-on-change-event-is-not-working68609f676b99d"><div class="pt-3 pb-5 fs-6"> Here's a how to add some HTML formatting to your comment: </div><ul class="list-unstyled p-0 m-0 formating-legend"><li class="py-1 fs-6" data-content="<pre></pre>"><b><pre></pre></b> for JS codes block</li><li class="py-1 fs-6" data-content="<pre lang="html"></pre>"><b><pre lang="html"></pre></b> for HTML code block</li><li class="py-1 fs-6" data-content="<pre lang="scss"></pre>"><b><pre lang="scss"></pre></b> for SCSS code block</li><li class="py-1 fs-6" data-content="<pre lang="php"></pre>"><b><pre lang="php"></pre></b> for PHP code block</li><li class="py-1 fs-6" data-content="<code></code>"><b><code></code></b> for single line of code</li><li class="py-1 fs-6" data-content="<strong></strong>"><b><strong></strong></b> to make things bold</li><li class="py-1 fs-6" data-content="<em></em>"><b><em></em></b> to emphasize</li><li class="py-1 fs-6" data-content="<ul><li></li></ul>"><b><ul><li></li></ul></b> to make list</li><li class="py-1 fs-6" data-content="<ol><li></li></ol>"><b><ol><li></li></ol></b> to make ordered list</li><li class="py-1 fs-6" data-content="<h3></h3>>"><b><h3></h3></b> to make headings</li><li class="py-1 fs-6" data-content="<a href=""></a>"><b><a></a></b> for links</li><li class="py-1 fs-6" data-content="<img src="" />"><b><img></b> to paste in an image</li><li class="py-1 fs-6" data-content="<blockquote></blockquote>"><b><blockquote></blockquote></b> to quote somebody</li><li class="py-1 fs-6" data-content=":)"><img alt="happy" src="https://devs.keenthemes.com/assets/media/smiles/happy.png"/> :)</li><li class="py-1 fs-6" data-content=":|"><img alt="shocked" src="https://devs.keenthemes.com/assets/media/smiles/shocked.png"/> :|</li><li class="py-1 fs-6" data-content=":("><img alt="sad" src="https://devs.keenthemes.com/assets/media/smiles/sad.png"/> :(</li></ul></div></form><a id="answers" data-kt-scroll-offset="{default: 100, lg: 125}"/><h3 class="fs-3 fw-bold text-gray-900 mb-10"> Replies (5)</h3><div class="mb-10" id="kt_post_replies"><div class="devs-box rounded p-3 p-lg-7 mb-7 " id="kt_post_comment_14671" data-kt-reply-id="14671"><div class="mb-0"><div class="d-flex flex-stack flex-wrap mb-5"><a href="javascript:void(0)"><div class="d-flex align-items-center py-1"><div class="symbol symbol-30px me-2"><img src="https://keenthemes.ams3.digitaloceanspaces.com/avatars/1/eg1PDpqP9hc5GhYpQoWrHTZpUP0v04RifMeFz0hj.png" alt="user"/></div><div class="d-flex flex-column align-items-start justify-content-center"><span class="d-flex align-items-center text-gray-900 fs-7 fw-bolder lh-1 mb-1"> Faizal <span class="badge bg-light-success text-success fs-9 fw-bold px-2 py-1 h-auto ms-2 rounded-1" data-bs-toggle="tooltip" title="Keenthemes team">Author</span></span><span class="text-muted fs-8 fw-semibold lh-1" data-bs-toggle="tooltip" data-bs-dismiss="click" title="13 Dec, 2023 1:25 AM UTC">1 year ago</span></div></div></a><div class="d-flex align-items-center py-1 me-n3 gap-2"><button class="btn btn-sm btn-bordered py-2 px-3" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Reply</button></div></div><div class="fs-6 fw-normal text-gray-800 overflow-hidden" data-kt-element="reply-text" data-kt-original-text="It seems like you might be facing an issue where the Select2 library is not being correctly loaded or initialized. You can wrap your script in a $(document).ready block to ensure that it executes after the DOM is ready. <pre> $(document).ready(function () { $("#filterBudget").select2().on("change", function (e) { console.log("select2:select"); }); });</pre>" data-kt-review="" data-kt-public="1"><br/><p>It seems like you might be facing an issue where the Select2 library is not being correctly loaded or initialized.<br/><br/>You can wrap your script in a $(document).ready block to ensure that it executes after the DOM is ready.<br/><br/></p><div class="highlight"><button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button><div class="highlight-code"><pre class="language-js"><code class="language-js">$(document).ready(function () {<br/> $("#filterBudget").select2().on("change", function (e) {<br/> console.log("select2:select");<br/> });<br/>});</code></pre></div></div><br/></div><div data-kt-element="comment-edit"/></div><div class="ps-10 mb-0" id="kt_post_comment_14671_wrapper" data-parent-id="14671"><div class="ps-5 ps-lg-10 2"/></div></div><div class="devs-box rounded p-3 p-lg-7 mb-7 " id="kt_post_comment_14634" data-kt-reply-id="14634"><div class="mb-0"><div class="d-flex flex-stack flex-wrap mb-5"><a href="javascript:void(0)"><div class="d-flex align-items-center py-1"><div class="symbol symbol-30px me-2"><img src="https://keenthemes.ams3.digitaloceanspaces.com/avatars/1/eg1PDpqP9hc5GhYpQoWrHTZpUP0v04RifMeFz0hj.png" alt="user"/></div><div class="d-flex flex-column align-items-start justify-content-center"><span class="d-flex align-items-center text-gray-900 fs-7 fw-bolder lh-1 mb-1"> Faizal <span class="badge bg-light-success text-success fs-9 fw-bold px-2 py-1 h-auto ms-2 rounded-1" data-bs-toggle="tooltip" title="Keenthemes team">Author</span></span><span class="text-muted fs-8 fw-semibold lh-1" data-bs-toggle="tooltip" data-bs-dismiss="click" title="10 Dec, 2023 11:32 PM UTC">1 year ago</span></div></div></a><div class="d-flex align-items-center py-1 me-n3 gap-2"><button class="btn btn-sm btn-bordered py-2 px-3" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Reply</button></div></div><div class="fs-6 fw-normal text-gray-800 overflow-hidden" data-kt-element="reply-text" data-kt-original-text="Hi, Instead of relying on the <code> on </code> method, try using the <code> change </code> event directly on the Select2 instance. <pre> $("#filterBudget").select2().on("change", function (e) { console.log("select2:select"); }); </pre> This should also capture the change event of the Select2." data-kt-review="" data-kt-public="1"><br/><p>Hi,<br/><br/>Instead of relying on the <code> on </code> method, try using the <code> change </code> event directly on the Select2 instance.<br/><br/></p><div class="highlight"><button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button><div class="highlight-code"><pre class="language-js"><code class="language-js">$("#filterBudget").select2().on("change", function (e) {<br/> console.log("select2:select");<br/>});</code></pre></div></div><br/>This should also capture the change event of the Select2.<br/></div><div data-kt-element="comment-edit"/></div><div class="ps-10 mb-0" id="kt_post_comment_14634_wrapper" data-parent-id="14634"><div class="ps-5 ps-lg-10 2"/></div></div><div class="ms-5 ms-lg-10"><div class="devs-box rounded p-3 p-lg-7 mb-7 " id="kt_post_comment_14648" data-kt-reply-id="14648"><div class="mb-0"><div class="d-flex flex-stack flex-wrap mb-5"><a href="javascript:void(0)"><div class="d-flex align-items-center py-1"><div class="symbol symbol-30px me-2"><div class="symbol-label fs-6 lh-0 fw-bold text-uppercase bg-light-info text-info"> G </div></div><div class="d-flex flex-column align-items-start justify-content-center"><span class="d-flex align-items-center text-gray-900 fs-7 fw-bolder lh-1 mb-1"> Guest </span><span class="text-muted fs-8 fw-semibold lh-1" data-bs-toggle="tooltip" data-bs-dismiss="click" title="11 Dec, 2023 8:21 AM UTC">1 year ago</span></div></div></a><div class="d-flex align-items-center py-1 me-n3 gap-2"><button class="btn btn-sm btn-bordered py-2 px-3" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Reply</button></div></div><div class="fs-6 fw-normal text-gray-800 overflow-hidden" data-kt-element="reply-text" data-kt-original-text="Hi, When I try to use the select2() function in javascript instead of HTML data-attributes, I have the error "select2 is not a function". Thanks for your help" data-kt-review="" data-kt-public="1"><br/><p>Hi,<br/><br/>When I try to use the select2() function in javascript instead of HTML data-attributes, I have the error "select2 is not a function".<br/><br/>Thanks for your help</p><br/></div><div data-kt-element="comment-edit"/></div><div class="ps-10 mb-0" id="kt_post_comment_14648_wrapper" data-parent-id="14648"><div class="ps-5 ps-lg-10 2"/></div></div></div><div class="devs-box rounded p-3 p-lg-7 mb-7 " id="kt_post_comment_14587" data-kt-reply-id="14587"><div class="mb-0"><div class="d-flex flex-stack flex-wrap mb-5"><a href="javascript:void(0)"><div class="d-flex align-items-center py-1"><div class="symbol symbol-30px me-2"><img src="https://keenthemes.ams3.digitaloceanspaces.com/avatars/1/eg1PDpqP9hc5GhYpQoWrHTZpUP0v04RifMeFz0hj.png" alt="user"/></div><div class="d-flex flex-column align-items-start justify-content-center"><span class="d-flex align-items-center text-gray-900 fs-7 fw-bolder lh-1 mb-1"> Faizal <span class="badge bg-light-success text-success fs-9 fw-bold px-2 py-1 h-auto ms-2 rounded-1" data-bs-toggle="tooltip" title="Keenthemes team">Author</span></span><span class="text-muted fs-8 fw-semibold lh-1" data-bs-toggle="tooltip" data-bs-dismiss="click" title="06 Dec, 2023 11:48 PM UTC">1 year ago</span></div></div></a><div class="d-flex align-items-center py-1 me-n3 gap-2"><button class="btn btn-sm btn-bordered py-2 px-3" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Reply</button></div></div><div class="fs-6 fw-normal text-gray-800 overflow-hidden" data-kt-element="reply-text" data-kt-original-text="Hi, Instead of relying on the generic change event, you can try using Select2-specific events. For example, you can use the select2:select event directly. <pre> $("#filterBudget").on("select2:select", function (e) { console.log("select2:select"); }); </pre>" data-kt-review="" data-kt-public="1"><br/><p>Hi,<br/><br/>Instead of relying on the generic change event, you can try using Select2-specific events. For example, you can use the select2:select event directly.<br/><br/></p><div class="highlight"><button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button><div class="highlight-code"><pre class="language-js"><code class="language-js">$("#filterBudget").on("select2:select", function (e) {<br/> console.log("select2:select");<br/>});</code></pre></div></div><br/></div><div data-kt-element="comment-edit"/></div><div class="ps-10 mb-0" id="kt_post_comment_14587_wrapper" data-parent-id="14587"><div class="ps-5 ps-lg-10 2"/></div></div><div class="ms-5 ms-lg-10"><div class="devs-box rounded p-3 p-lg-7 mb-7 " id="kt_post_comment_14619" data-kt-reply-id="14619"><div class="mb-0"><div class="d-flex flex-stack flex-wrap mb-5"><a href="javascript:void(0)"><div class="d-flex align-items-center py-1"><div class="symbol symbol-30px me-2"><div class="symbol-label fs-6 lh-0 fw-bold text-uppercase bg-light-info text-info"> G </div></div><div class="d-flex flex-column align-items-start justify-content-center"><span class="d-flex align-items-center text-gray-900 fs-7 fw-bolder lh-1 mb-1"> Guest </span><span class="text-muted fs-8 fw-semibold lh-1" data-bs-toggle="tooltip" data-bs-dismiss="click" title="08 Dec, 2023 3:48 PM UTC">1 year ago</span></div></div></a><div class="d-flex align-items-center py-1 me-n3 gap-2"><button class="btn btn-sm btn-bordered py-2 px-3" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Reply</button></div></div><div class="fs-6 fw-normal text-gray-800 overflow-hidden" data-kt-element="reply-text" data-kt-original-text="Hi, Thanks for the reply ! I tried this too, but still not working unfortunately." data-kt-review="" data-kt-public="1"><br/><p>Hi,<br/><br/>Thanks for the reply ! I tried this too, but still not working unfortunately.</p><br/></div><div data-kt-element="comment-edit"/></div><div class="ps-10 mb-0" id="kt_post_comment_14619_wrapper" data-parent-id="14619"><div class="ps-5 ps-lg-10 2"/></div></div></div><form class="d-none form mb-0 pb-0 pt-7" id="kt_post_comment_reply_form" action="https://devs.keenthemes.com/reply"><input type="hidden" name="parent_id" value=""/><input type="hidden" name="_token" value="CNeZWQy87WZTGu2jmBPbAAncuymCN7MYsYsr2lUf"/><input type="hidden" name="question_id" value="5976"/><div class="form-group mb-2"><textarea name="content" class="form-control devs-box" rows="10" placeholder="Your reply here.."/></div><div class="form-group"><div id="question_reply_captcha_container" class="question_reply_captcha_container"/></div><div class="d-flex align-items-center justify-content-between py-2 mb-0"><div class="text-primary fs-base fw-bold cursor-pointer" data-bs-toggle="collapse" data-bs-target="#select2-on-change-event-is-not-working68609f677d949"> Text formatting options </div><div class="d-flex ms-2"><label class="form-group form-check form-switch form-check-custom form-check-solid me-6 mb-0" data-bs-toggle="tooltip" title="Private message will be shown only to Support agent."><input type="hidden" name="public" value="1"/><input class="form-check-input" type="checkbox" name="public" value="0"/><span class="form-check-label fs-7 fw-bolder text-gray-800"> Private reply </span></label><button type="reset" class="btn btn-light-primary fw-bold me-3 d-none" data-kt-action="cancel">Cancel</button><a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Submit</a></div></div><div class="collapse" id="select2-on-change-event-is-not-working68609f677d949"><div class="pt-3 pb-5 fs-6"> Here's a how to add some HTML formatting to your comment: </div><ul class="list-unstyled p-0 m-0 formating-legend"><li class="py-1 fs-6" data-content="<pre></pre>"><b><pre></pre></b> for JS codes block</li><li class="py-1 fs-6" data-content="<pre lang="html"></pre>"><b><pre lang="html"></pre></b> for HTML code block</li><li class="py-1 fs-6" data-content="<pre lang="scss"></pre>"><b><pre lang="scss"></pre></b> for SCSS code block</li><li class="py-1 fs-6" data-content="<pre lang="php"></pre>"><b><pre lang="php"></pre></b> for PHP code block</li><li class="py-1 fs-6" data-content="<code></code>"><b><code></code></b> for single line of code</li><li class="py-1 fs-6" data-content="<strong></strong>"><b><strong></strong></b> to make things bold</li><li class="py-1 fs-6" data-content="<em></em>"><b><em></em></b> to emphasize</li><li class="py-1 fs-6" data-content="<ul><li></li></ul>"><b><ul><li></li></ul></b> to make list</li><li class="py-1 fs-6" data-content="<ol><li></li></ol>"><b><ol><li></li></ol></b> to make ordered list</li><li class="py-1 fs-6" data-content="<h3></h3>>"><b><h3></h3></b> to make headings</li><li class="py-1 fs-6" data-content="<a href=""></a>"><b><a></a></b> for links</li><li class="py-1 fs-6" data-content="<img src="" />"><b><img></b> to paste in an image</li><li class="py-1 fs-6" data-content="<blockquote></blockquote>"><b><blockquote></blockquote></b> to quote somebody</li><li class="py-1 fs-6" data-content=":)"><img alt="happy" src="https://devs.keenthemes.com/assets/media/smiles/happy.png"/> :)</li><li class="py-1 fs-6" data-content=":|"><img alt="shocked" src="https://devs.keenthemes.com/assets/media/smiles/shocked.png"/> :|</li><li class="py-1 fs-6" data-content=":("><img alt="sad" src="https://devs.keenthemes.com/assets/media/smiles/sad.png"/> :(</li></ul></div></form><form class="d-none form mb-0 p-0" id="kt_post_comment_edit_form" action="" data-kt-action="https://devs.keenthemes.com/reply"><input type="hidden" name="_method" value="PUT"/><input type="hidden" name="_token" value="CNeZWQy87WZTGu2jmBPbAAncuymCN7MYsYsr2lUf"/><input type="hidden" name="question_id" value="5976"/><div class="form-group mb-2"><textarea name="content" class="form-control devs-box" rows="10" placeholder="Your reply here.."/></div><div class="form-group"><div id="question_reply_captcha_container" class="question_reply_captcha_container"/></div><div class="d-flex align-items-center justify-content-between py-2 mb-0"><div class="text-primary fs-base fw-bold cursor-pointer" data-bs-toggle="collapse" data-bs-target="#select2-on-change-event-is-not-working68609f677da08"> Text formatting options </div><div class="d-flex ms-2"><label class="form-group form-check form-switch form-check-custom form-check-solid me-6 mb-0" data-bs-toggle="tooltip" title="Private message will be shown only to Support agent."><input type="hidden" name="public" value="1"/><input class="form-check-input" type="checkbox" name="public" value="0"/><span class="form-check-label fs-7 fw-bolder text-gray-800"> Private reply </span></label><button type="reset" class="btn btn-light-primary fw-bold me-3 d-none" data-kt-action="cancel">Cancel</button><a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#page_modal_account_login">Submit</a></div></div><div class="collapse" id="select2-on-change-event-is-not-working68609f677da08"><div class="pt-3 pb-5 fs-6"> Here's a how to add some HTML formatting to your comment: </div><ul class="list-unstyled p-0 m-0 formating-legend"><li class="py-1 fs-6" data-content="<pre></pre>"><b><pre></pre></b> for JS codes block</li><li class="py-1 fs-6" data-content="<pre lang="html"></pre>"><b><pre lang="html"></pre></b> for HTML code block</li><li class="py-1 fs-6" data-content="<pre lang="scss"></pre>"><b><pre lang="scss"></pre></b> for SCSS code block</li><li class="py-1 fs-6" data-content="<pre lang="php"></pre>"><b><pre lang="php"></pre></b> for PHP code block</li><li class="py-1 fs-6" data-content="<code></code>"><b><code></code></b> for single line of code</li><li class="py-1 fs-6" data-content="<strong></strong>"><b><strong></strong></b> to make things bold</li><li class="py-1 fs-6" data-content="<em></em>"><b><em></em></b> to emphasize</li><li class="py-1 fs-6" data-content="<ul><li></li></ul>"><b><ul><li></li></ul></b> to make list</li><li class="py-1 fs-6" data-content="<ol><li></li></ol>"><b><ol><li></li></ol></b> to make ordered list</li><li class="py-1 fs-6" data-content="<h3></h3>>"><b><h3></h3></b> to make headings</li><li class="py-1 fs-6" data-content="<a href=""></a>"><b><a></a></b> for links</li><li class="py-1 fs-6" data-content="<img src="" />"><b><img></b> to paste in an image</li><li class="py-1 fs-6" data-content="<blockquote></blockquote>"><b><blockquote></blockquote></b> to quote somebody</li><li class="py-1 fs-6" data-content=":)"><img alt="happy" src="https://devs.keenthemes.com/assets/media/smiles/happy.png"/> :)</li><li class="py-1 fs-6" data-content=":|"><img alt="shocked" src="https://devs.keenthemes.com/assets/media/smiles/shocked.png"/> :|</li><li class="py-1 fs-6" data-content=":("><img alt="sad" src="https://devs.keenthemes.com/assets/media/smiles/sad.png"/> :(</li></ul></div></form></div></div><div id="kt_aside" class="app-aside devs-aside w-lg-275px" data-kt-drawer="true" data-kt-drawer-name="app-aside" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'250px', '350px': '275px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_aside_mobile_toggle"><div class="w-100 p-5 p-lg-0" id="kt_aside_menu_wrapper"><button id="kt_app_search_toggle" type="button" class="d-flex py-4 px-5 rounded devs-box bg-body flex-stack w-100 mb-6 mb-lg-12"><span class="d-flex align-items-center me-2"><i class="ki-duotone ki-magnifier fs-4 text-gray-500"><span class="path1"/><span class="path2"/></i><span class="text-gray-500 fs-7 fw-semibold ms-2">Search</span></span><span class="text-gray-500 fs-7 fw-semibold"> cmd + / </span></button><div id="docsearch" class="d-none"/><div class="d-flex flex-column rounded-3 devs-box fs-5 p-8 mb-6 mb-lg-12"><h2 class="text-dark fw-bold fs-4 mb-7">Metronic</h2><div class="d-flex flex-column gap-6"><a href="https://keenthemes.com/metronic" class="fw-semibold text-hover-primary text-gray-700">Go to Metronic</a><a href="https://devs.keenthemes.com/metronic" class="fw-semibold text-hover-primary text-gray-700">Downloads</a><a href="https://devs.keenthemes.com/question/understanding-metronic-themeforest-license-a-comprehensive-guide" class="fw-semibold text-hover-primary text-gray-700">License Guide & FAQ</a><a href="https://1.envato.market/EA4JP" class="fw-semibold text-hover-primary text-gray-700">Purchase Metronic</a><a href="https://keenthemes.studio" class="fw-semibold text-hover-primary text-gray-700">I have a Custom Project</a><a href="https://themeforest.net/refund_requests/new" class="fw-semibold text-hover-primary text-gray-700">Refunds</a></div></div><a href="https://1.envato.market/Vm7VRE"><img src="https://devs.keenthemes.com/assets/media/banners/buy-metronic.png" alt="buy metronic" class="mw-100 rounded-3 mb-6 mb-lg-12" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-placement="top" data-bs-title="<b>License Reminder</b>" data-bs-content="One license allows using Metronic for a single deployment and all subsequent usage requires a separate license. <div class='mb-3'></div> If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License."/></a><a href="https://keenthemes.com/products/templates-mega-bundle"><img src="https://devs.keenthemes.com/assets/media/banners/mega-bundle.png" alt="keenthemes mega bundle" class="mw-100 rounded-3 mb-6 mb-lg-12"/></a></div></div></div></div></div><footer class="app-footer d-block"><div class="app-container container-xxl positon-relative pt-20 zindex-1 mb-lg-n20"><div class="d-flex align-items-stretch justify-content-between flex-wrap flex-md-nowrap rounded-3 border shadow bg-body position-relative zindex-2"><div class="d-flex flex-column justify-content-start align-items-start my-2 me-5 px-10 pt-6 pb-0 p-lg-10"><div class="fs-2x fs-lg-2qx text-gray-800 mb-1"><span class="fw-bold">Stay Connected With Us</span></div><div class="fs-4 fw-normal text-gray-800"> The More We Learn, The More We Are Able To Innovate & To Develop </div></div><div class="rounded-3 d-flex align-items-center m-0 p-8 p-lg-12"><form class="validate border border-2 border-gray-300 rounded-3 d-flex position-relative m-0" action="https://keenthemes.us3.list-manage.com/subscribe/post?u=b10f23244c11e2946463ea844&id=3aba0b6220" method="post" target="_blank" novalidate=""><div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_b10f23244c11e2946463ea844_3aba0b6220" tabindex="-1" value=""/></div><input type="email" class="form-control form-control-transparent w-275px pe-10 fs-base" name="EMAIL" placeholder="Enter Email to Stay Updated"/><button class="btn btn-icon me-2" type="submit"><i class="ki-duotone ki-arrow-right text-gray-400 fs-2x"><span class="path1"/><span class="path2"/></i></button></form></div></div></div><div class="bg-gray-100 pt-15 pb-13 pt-lg-20 pb-lg-17"><div class="app-container container-xxl pt-20"><div class="row"><div class="col-lg-5 mb-10 mb-lg-0"><div class="rounded border border-gray-300 border-dashed p-10 me-lg-15"><div class="mb-5 text-start"><div class="fs-5 fw-semibold text-dark mb-0">How about</div><div class="fs-2 fw-bold text-dark">a Custom Project ?</div></div><div class="fs-6 fw-normal text-gray-800 lh-lg mb-6"> Since 2012, we have helped startups, blue chip companies and government agencies and successfully delivered over 120 custom projects. </div><div class="text-start"><a href="https://keenthemes.studio" target="_blank" class="btn btn-dark fw-bold py-3 fs-6">Hire Experts</a></div></div></div><div class="col-lg-7 ps-lg-10 fs-5"><div class="row"><div class="col-4"><div class="ms-lg-5"><h3 class="mb-3 fs-4 fw-bold text-dark ls-sm">Products</h3><div class="d-flex flex-column"><a href="https://keenthemes.com/metronic" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Metronic Tailwind</a><a href="https://aspnetzero.com/?ref=keenthemes" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Metronic ASP.NET</a><a href="https://keenthemes.com/react-templates" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">React Templates</a><a href="https://keenthemes.com/bootstrap-templates" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Bootstrap Templates</a><a href="https://keenthemes.com/boilerplates" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Boilerplates</a><a href="https://keenthemes.com/vectors" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Vectors</a><a href="https://keenthemes.com/freebies" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Freebies</a></div></div></div><div class="col-4"><div class="ms-lg-5"><h3 class="mb-3 fs-4 fw-bold text-dark ls-sm">Legal</h3><div class="d-flex flex-column"><a href="https://keenthemes.com/faqs" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">FAQs</a><a href="https://keenthemes.com/contact" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Contact Us</a><a href="https://keenthemes.com/support" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Support</a><a href="https://keenthemes.com/licensing" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">License Terms</a><a href="https://keenthemes.com/privacy" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Privacy Policy</a><a href="https://keenthemes.com/terms" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Terms & Conditions</a><a href="https://keenthemes.com/refund-policy" class="fw-normal text-gray-800 text-hover-primary py-2 py-lg-3">Refund Policy</a></div></div></div><div class="col-4"><div class="ms-lg-15"><h3 class="mb-3 fs-4 fw-bold text-dark ls-sm">Stay Connected</h3><div class="d-flex flex-column"><a href="https://x.com/keenthemes" class="d-flex align-items-center text-center text-gray-700 text-hover-primary py-2 py-lg-3"><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/social-icons/x.svg" class="lozad w-20px me-3" alt=""/> X </a><a href="https://github.com/keenthemes/" class="d-flex align-items-center text-center text-gray-700 text-hover-primary py-2 py-lg-3"><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/social-icons/github.svg" class="lozad w-20px me-3" alt=""/> Github </a><a href="https://www.linkedin.com/company/keenthemes" class="d-flex align-items-center text-center text-gray-700 text-hover-primary py-2 py-lg-3"><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/social-icons/linkedin.svg" class="lozad w-20px me-3" alt=""/> Linkedin </a><a href="https://instagram.com/keenthemes" class="d-flex align-items-center text-center text-gray-700 text-hover-primary py-2 py-lg-3"><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/social-icons/instagram.svg" class="lozad w-20px me-3" alt=""/> Instagram </a><a href="https://dribbble.com/keenthemes" class="d-flex align-items-center text-center text-gray-700 text-hover-primary py-2 py-lg-3"><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/social-icons/dribbble.svg" class="lozad w-20px me-3" alt=""/> Dribbble </a></div></div></div></div></div></div></div></div><div class="app-container container-xxl d-flex align-items-center flex-column flex-md-row flex-md-stack gap-2 py-6 py-lg-8"><div class="d-flex align-items-center order-2 order-lg-1"><a href="https://keenthemes.com" target="_blank"><img class="theme-light-show h-25px" src="https://devs.keenthemes.com/assets/media/logos/keenthemes.svg" alt=""/><img class="theme-dark-show h-25px" src="https://devs.keenthemes.com/assets/media/logos/keenthemes-dark.svg" alt=""/></a><span class="fs-7 fw-semibold text-gray-600 ps-2" style="padding-top: 2px"> © 2025 </span></div><div class="d-flex flex-column flex-md-row flex-center order-1 order-md-2 mb-5 mb-md-0"><div class="fs-7 fw-semibold text-gray-600 mb-5 mb-md-0"> Secured payment by <a href="https://www.paddle.com/" target="_blank" class="fw-bold">Paddle</a> with </div><div class="ms-4"><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/payment-methods/default/paypal.svg" alt="" class="lozad h-20px me-2 rounded-1"/><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/payment-methods/default/visa.svg" alt="" class="lozad h-20px me-2 rounded-1"/><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/payment-methods/default/mastercard.svg" alt="" class="lozad h-20px me-2 rounded-1"/><img src="https://devs.keenthemes.com/assets/media/misc/empty.png" data-src="https://devs.keenthemes.com/assets/media/payment-methods/default/americanexpress.svg" alt="" class="lozad h-20px rounded-1"/></div></div></div></footer></div></div><div class="modal fade" id="kt_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true"><div class="modal-dialog mw-400px mw-lg-600px" role="document"><div class="modal-content w-lg-600px rounded-3"><div class="modal-body p-10 pg-lg-15"><div id="kt_algolia_search" data-user-id="0"><input type="text" class="d-flex py-4 px-5 rounded devs-box bg-body flex-stack w-100 mb-6" placeholder="Search questions..." autocomplete="off"/><span class="indicator-progress"><span class="spinner-border spinner-border-sm align-middle me-2"/><span class="fs-base">Please wait...</span></span></div><div id="kt_search_results" class="pt-3 pb-1"> No recent searches </div></div></div></div></div><div class="modal fade" tabindex="-1" role="dialog" id="page_modal_account_login"><div class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable"><div class="modal-content p-10"><div class="modal-header text-end border-0 py-0 justify-content-end me-n4"><button type="button" class="btn btn-icon btn-sm btn-text-muted btn-active-text-primary" data-bs-dismiss="modal" aria-label="Close"><i class="ki-duotone ki-cross-square fs-1"><span class="path1"/><span class="path2"/></i></button></div><div class="modal-body pt-4 scroll-y"><form method="POST" action="https://devs.keenthemes.com/account/signin" novalidate="novalidate" id="page_account_signin_form" class="page_account_signin_form_modal"><input type="hidden" name="_token" value="CNeZWQy87WZTGu2jmBPbAAncuymCN7MYsYsr2lUf"/><div id="my_name_caFfIDrusSwMyhLN_wrap" style="display: none" aria-hidden="true"><input id="my_name_caFfIDrusSwMyhLN" name="my_name_caFfIDrusSwMyhLN" type="text" value="" autocomplete="nope" tabindex="-1"/><input name="valid_from" type="text" value="eyJpdiI6IndoOTVETU82MTNwUHN6eEZic0FWMlE9PSIsInZhbHVlIjoiWlhaa0ExaUF0MWl2eTZ5T1ZFZmlRUT09IiwibWFjIjoiMTY3YjE1MGYzMmZhMGNkMzU3MTM5NmQ4ZGMyM2VkZTczOTliYzQ1NWQ2MGQ5ZDA4MDBhMzU2OTliMGJlM2IyOCIsInRhZyI6IiJ9" autocomplete="off" tabindex="-1"/></div><h1 class="text-center text-dark fw-bold fs-1 pt-5 mb-10"> Sign In </h1><div id="page_account_signin_message" class="d-none py-5"/><div class="form-group py-1"><label class="fs-base fw-semibold">Email</label><input type="email" class="form-control from-control-custom" name="email" maxlength="50"/></div><div class="form-group py-1"><div class="d-flex justify-content-between"><label class="fs-base fw-semibold">Password</label><a href="#" class="text-end fw-semibold text-primary" id="page_account_password_reset_toggle">Forgot Password ?</a></div><input type="password" class="form-control from-control-custom" name="password" maxlength="50"/></div><div class="form-group py-1 mb-6 align-items-center"><div class="d-flex align-items-center"><div class="form-check form-check-custom form-check-solid"><input type="checkbox" value="1" name="remember" class="form-check-input" id="page_account_signup_remember"/><label class="form-check-label mb-0 me-1 text-gray-600 fw-semibold" for="page_account_signup_remember"> Remember me </label></div></div></div><div class="form-group"><div id="signin_captcha_container"/></div><div class="form-group mb-12 d-flex justify-content-between pt-2"><button type="submit" id="page_account_signin_submit" class="btn btn-custom btn-primary fw-semibold py-4 px-7 me-3 radius-lg" data-verfication-url="https://devs.keenthemes.com/api/recaptcha/verify" data-sitekey="6Ld6TMgaAAAAAB2G5S5S703IxTWq-9D1_JY0Vw_i"><span class="indicator-label"> Sign In</span><span class="indicator-progress"> Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"/></span></button><a href="https://devs.keenthemes.com/account/redirect/google?redirect_uri=https://devs.keenthemes.com/question/select2-on-change-event-is-not-working" class="btn btn-custom btn-light-primary fw-semibold flex-grow-1 py-4 px-7 radius-lg" data-action="signin-google" rel="nofollow noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewbox="0 0 28 28" fill="none" class="h-20px me-2"><path d="M27.9851 14.2618C27.9851 13.1146 27.8899 12.2775 27.6837 11.4094H14.2788V16.5871H22.1472C21.9886 17.8738 21.132 19.8116 19.2283 21.1137L19.2016 21.287L23.44 24.4956L23.7336 24.5242C26.4304 22.0904 27.9851 18.5093 27.9851 14.2618Z" fill="#4285F4"/><path d="M14.279 27.904C18.1338 27.904 21.37 26.6637 23.7338 24.5245L19.2285 21.114C18.0228 21.9356 16.4047 22.5092 14.279 22.5092C10.5034 22.5092 7.29894 20.0754 6.15663 16.7114L5.9892 16.7253L1.58205 20.0583L1.52441 20.2149C3.87224 24.7725 8.69486 27.904 14.279 27.904Z" fill="#34A853"/><path d="M6.15656 16.7113C5.85516 15.8432 5.68072 14.913 5.68072 13.9519C5.68072 12.9907 5.85516 12.0606 6.14071 11.1925L6.13272 11.0076L1.67035 7.62109L1.52435 7.68896C0.556704 9.58024 0.00146484 11.7041 0.00146484 13.9519C0.00146484 16.1997 0.556704 18.3234 1.52435 20.2147L6.15656 16.7113Z" fill="#FBBC05"/><path d="M14.279 5.3947C16.9599 5.3947 18.7683 6.52635 19.7995 7.47204L23.8289 3.6275C21.3542 1.37969 18.1338 0 14.279 0C8.69485 0 3.87223 3.1314 1.52441 7.68899L6.14077 11.1925C7.29893 7.82856 10.5034 5.3947 14.279 5.3947Z" fill="#EB4335"/></svg> Sign In with Google </a></div><div class="d-flex flex-center fs-5 fw-bold"><span class="text-muted me-2">Or</span><a href="#" class="text-primary" id="page_account_signup_toggle"> Create an Account </a></div></form><div id="page_account_notice_complete" class="d-none page_account_notice_complete_modal"><h1 class="text-center text-dark fw-bold fs-1 pt-5 mb-10"> Thank you! </h1><div class="content text-center fw-semibold text-gray-600 pb-7 lh-lg fs-4"> We have sent an activation link to your email.<br/> Please click it and you are done. </div><div class="user-verified-text text-center fw-semibold text-gray-600 pb-7 lh-lg fs-4 d-none"> Your email is confirmed. Please sign in to use our services.<br/></div><div class="text-center"><a href="#" class="btn btn-custom btn-primary fw-semibold py-3 px-7 radius-lg" id="page_account_signin_toggle"> Sign In </a></div><img src="https://devs.keenthemes.com/assets/media/illustrations/customerservice.svg" alt=""/></div><form method="POST" action="https://devs.keenthemes.com/account/signup" novalidate="novalidate" id="page_account_signup_form" class="d-none page_account_signup_form_modal"><input type="hidden" name="_token" value="CNeZWQy87WZTGu2jmBPbAAncuymCN7MYsYsr2lUf"/><h1 class="text-center text-dark fw-bold fs-1 pt-5 mb-10"> Create Account </h1><input type="hidden" name="mode" value="modal"/><div class="form-group py-1"><label class="fs-base fw-semibold">Email</label><input type="email" class="form-control from-control-custom" name="email" maxlength="50"/></div><div class="form-group py-1"><label class="fs-base fw-semibold">Password</label><input type="password" class="form-control from-control-custom" name="password" maxlength="50"/></div><div class="form-group py-1"><label class="fs-base fw-semibold">Confirm Password</label><input type="password" class="form-control from-control-custom" name="confirm_password" maxlength="50"/></div><div class="form-group py-1 mb-6 align-items-center"><div class="d-flex align-items-center"><div class="form-check form-check-custom form-check-solid"><input type="checkbox" value="1" name="agree_terms" class="form-check-input" id="page_account_signup_terms"/><label class="form-check-label mb-0 me-1 text-gray-600 fw-semibold" for="page_account_signup_terms"> I agree with </label><a href="https://keenthemes.com/terms" class="fw-semibold ms-2">Keenthemes Term of Use</a></div></div></div><div class="form-group"><div id="signup_captcha_container"/></div><div class="form-group mb-12 d-flex justify-content-between pt-2"><button type="submit" id="page_account_signup_submit" class="btn btn-custom btn-primary fw-semibold py-4 px-7 me-3 radius-lg" data-verfication-url="https://devs.keenthemes.com/api/recaptcha/verify" data-sitekey="6Ld6TMgaAAAAAB2G5S5S703IxTWq-9D1_JY0Vw_i"><span class="indicator-label"> Sign Up</span><span class="indicator-progress"> Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"/></span></button><a href="https://devs.keenthemes.com/account/redirect/google?redirect_uri=https://devs.keenthemes.com/question/select2-on-change-event-is-not-working" class="btn btn-custom btn-light-primary fw-semibold flex-grow-1 py-4 px-7 radius-lg" data-action="signin-google" rel="nofollow noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewbox="0 0 28 28" fill="none" class="h-20px me-2"><path d="M27.9851 14.2618C27.9851 13.1146 27.8899 12.2775 27.6837 11.4094H14.2788V16.5871H22.1472C21.9886 17.8738 21.132 19.8116 19.2283 21.1137L19.2016 21.287L23.44 24.4956L23.7336 24.5242C26.4304 22.0904 27.9851 18.5093 27.9851 14.2618Z" fill="#4285F4"/><path d="M14.279 27.904C18.1338 27.904 21.37 26.6637 23.7338 24.5245L19.2285 21.114C18.0228 21.9356 16.4047 22.5092 14.279 22.5092C10.5034 22.5092 7.29894 20.0754 6.15663 16.7114L5.9892 16.7253L1.58205 20.0583L1.52441 20.2149C3.87224 24.7725 8.69486 27.904 14.279 27.904Z" fill="#34A853"/><path d="M6.15656 16.7113C5.85516 15.8432 5.68072 14.913 5.68072 13.9519C5.68072 12.9907 5.85516 12.0606 6.14071 11.1925L6.13272 11.0076L1.67035 7.62109L1.52435 7.68896C0.556704 9.58024 0.00146484 11.7041 0.00146484 13.9519C0.00146484 16.1997 0.556704 18.3234 1.52435 20.2147L6.15656 16.7113Z" fill="#FBBC05"/><path d="M14.279 5.3947C16.9599 5.3947 18.7683 6.52635 19.7995 7.47204L23.8289 3.6275C21.3542 1.37969 18.1338 0 14.279 0C8.69485 0 3.87223 3.1314 1.52441 7.68899L6.14077 11.1925C7.29893 7.82856 10.5034 5.3947 14.279 5.3947Z" fill="#EB4335"/></svg> Sign In with Google </a></div><div class="d-flex flex-center fs-5 fw-bold"><span class="fw-semibold text-muted me-2">Already have an account ?</span><a href="#" class="text-end fw-bold text-primary" id="page_account_signin_toggle"> Sign In </a></div></form><form method="POST" action="https://devs.keenthemes.com/account/password/email" id="page_account_password_reset_form" class="d-none page_account_password_reset_form_modal"><input type="hidden" name="_token" value="CNeZWQy87WZTGu2jmBPbAAncuymCN7MYsYsr2lUf"/><h1 class="text-center text-dark fw-bold fs-1 pt-5 mb-10"> Forgot Your Password ? </h1><p class="m-0 pt-0 pb-10 text-center fw-semibold fs-6 text-gray-600"> Please enter your email and we will send a link to your email to reset your password </p><div class="form-group py-1"><input type="email" class="form-control from-control-custom" name="email" value="" placeholder="Email" maxlength="50"/></div><div class="form-group"><div id="reset_password_captcha_container"/></div><div class="form-group py-1"><div class="g-recaptcha" id="g-recaptcha-password" data-sitekey="6Lf92jMUAAAAANk8wz68r73rA2uPGr4_e0gn96BL"/></div><div class="form-group mb-0 d-flex justify-content-center pt-2"><button type="submit" id="page_password_reset_submit" class="btn btn-custom btn-primary fw-semibold py-4 px-7 me-3 radius-lg"><span class="indicator-label"> Reset Password</span><span class="indicator-progress"> Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"/></span></button><a href="#" id="page_password_reset_cancel" class="btn btn-custom btn-light-primary fw-semibold py-4 px-7 radius-lg"> Cancel </a></div></form></div></div></div></div><div class="alert cookiealert" role="alert"><div class="container d-flex flex-center flex-wrap py-5 fw-semibold"><div class="me-5"> We use cookies to ensure you get the best experience on our website. <a href="https://cookiesandyou.com/" target="_blank">Learn more</a></div><button type="button" class="btn btn-primary fw-semibold acceptcookies"> I agree </button></div></div></body>