Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Don't detect select2


I am trying to use select2 but my function is not detected, the following

$('#departamento').on('change', function () {
var data = $(".select2 option:selected").text();
console.log(data);
})


also try the following
$('#departamento').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (12)


Hi Jesus,

May I know which Metronic Laravel version are you using?

If it's not the latest, could you please try to get the latest Metronic Laravel version? And then replace these 2 files into your current Laravel project. Please note, if you have modified these files.

resources/assets/core/plugins/plugins.js
webpack.mix.js

Thanks



I use the version Metronic v8.0.35, I don't use the latest version v8.0.36,due to incompatibility, with phpmailer

I have not made any changes to that file.


resources/assets/core/plugins/plugins.js
webpack.mix.js



Hi Jesus,

How's the issue going? Have you tried to update with the latest version? Or at least try to update those 2 files?

Thanks



I already tried to update the files and it didn't work, I'll go to the latest version 3.037, I'll let you know how it goes



select2 js file is not available for angular, you should install it from open source.



Hi Jesus,

Could you please try to use this HTML markup?


<select class="form-select" name="tag" data-control="select2">
...



Please check if the element is exist here as well.

console.log($("#departamento"));


Thanks



if it prints me the console

but my function no longer detects me
, the following code does not work

$(document.querySelector("#kt_ticket_new_form").querySelector("[name="departamento"]")).on("change", (function (event) {
e.revalidateField("departamento");
if (event.target.value.length != 0) {
KTicketMuestraServicios.int();
} else {
KTicketMuestraServicios.limpiar_select_servicio();
document.getElementById("prioridad_int").style.display = "none";
}
}))



I tell you that inside my js I place the following, at the beginning


require("select2");



if i remove it tell me



Uncaught TypeError: $(...).select2 is not a function



Hi Jesus,

I'm not sure where you have this function in your blade file ,but if it is before

<x-base-layout></x-base-layout>

Then it will not work and you will have to place the <script></script> after the

</x-base-layout>


If you've created your own js file in the assets folder then go to config/global/pages.php and you will need to add the asset to your page you are loading it to

Example -


"YOUR_PAGE_NAME" => array(
"*" => array(
"title" => "YOUR_PAGE_TITLE",
"assets" => array(
"custom" => array(
"js" => array(
"path_to_your_js_file,
),
),
),
),
),


If none of that works check the console in chrome using dev tools to see if there is an error. You can paste it here if you need help.

Note - Usually you don't need to a function for select2 using Metronic ,but it seems you may be trying to load the data to the select and you can simply use


<select class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>


Also always good to reference the documentation provided as well for examples.

Metronic Select2 Documentation

Hope this helps.



What you mention I have already done, I have it as follows

<x-base-layout>


<select class="form-select form-select-solid" data-control="select2" data-allow-clear="true" data-placeholder="{{ __("mensajes.globales.select_placeholder") }}" name="servicio" >
<option></option>
@foreach ($departamentos as $key => $value)
<option value="{{ $value->departamento_id }}">{{ $value->departamento_nombre }}</option>
@endforeach
</select>


</x-base-layout>


What I want to do is to know which element has been selected by java script but it doesn't let me

what you say about config/global/pages.php


"ticket" => array( 
"new" => array(
"*" => array(
"title" => "Nuevo ticket",
"assets" => array(
"custom" => array(
"js" => array(
"plugins/custom/ckeditor/ckeditor-document.bundle.js",
"js/custom/ticket/new.js",
),
),
),
),
),
),


this is the file -> 'js/custom/ticket/new.js',



Hi Jesus,

Can you explain what this select2 is meant to do? Is it an edit or create form? Is it used for filtering?

I'll need this to better help you fix your problem.



it is used to filter, from what you select it displays information


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(