Tag: jquery-select2

select2 plugin not working When generating a new row with a dynamic drop down list

$(“#add-btn”).click(function() { $(“#dynamicAddRemove”).append(‘<tr> <td><select class=”select_acount js-example-basic-single”><option value=””>1</option><option value=””>2</option> <option value=””>3</option><option value=””>4</option></select></td> <td><button type=”button” name=”add” class=”btn btn-danger remove-tr”><i class=”fas fa-trash” ></i></button></td></tr>’); }); $(document).ready(function() { $(‘.js-example-basic-single’).select2( {dropdownParent: $(‘#exampleModal’)}); }); <table id=”dynamicAddRemove”> <tr> <td><select class=”select_acount js-example-basic-single”> <option value=””>1</option> <option value=””>2</option> <option value=””>3</option> <option value=””>4</option> </select> </td> <td class=”td2″><button type=”button” name=”add” id=”add-btn” class=”btn btn-success”></i></button></td> </tr> </table> <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&#8221; rel=”stylesheet”>… Read More select2 plugin not working When generating a new row with a dynamic drop down list

MRLeave a comment

Why Select 2 jquery plugin doesn't the work inside the Bootstrap modal? But it works normally in any part of a page outside the scope of modal

$(document).ready(function() { $(‘.js-example-basic-single’).select2(); dropdownParent: $(‘#exampleModal’) }); <div class=”container text-center”> <div class=”row”> <div class=”col-sm”></div> <div class=”col-sm”> <div class=”card text-center”> <div class=”card-header”> </div> <div class=”card-body”> <select class=”form-select js-example-basic-single” aria-label=”Default select example”> <option selected>–select–</option> <option value=”1″>One</option> <option value=”2″>Two</option> <option value=”3″>Three</option> </select> <!– Button trigger modal –> <button type=”button” class=”btn btn-primary” data-bs-toggle=”modal” data-bs-target=”#exampleModal”> inside modal </button> <!– Modal –>… Read More Why Select 2 jquery plugin doesn't the work inside the Bootstrap modal? But it works normally in any part of a page outside the scope of modal

MRLeave a comment

Select2- How to access property value of remote data – Cannot read properties of undefined

I am using select2 to fetch data via ajax from the url https://api.teleport.org/api/cities/. The request is able to return some json data, however, mapping the indexes to the select options returns a console warning message " Cannot read properties of undefined". My intention is to get the value of the matching_full_name index from the json… Read More Select2- How to access property value of remote data – Cannot read properties of undefined

MRLeave a comment

Table header is being deleted when deleting row from table

When I am deleting row from my table, also the table header is being deleted, how I can fix this? $(‘#clubs tbody’).on(‘click’, ‘.deleteBtn’, function() { $(this).closest(‘tr’).remove(); }); Button tag <td> <button class="mb-1 btn bg-danger fas fa-trash-alt deleteBtn" title=@DbResHtml.T("Delete", "Resources")></button> </td> My button have a class of .delete so when I click it, my row is… Read More Table header is being deleted when deleting row from table

MRLeave a comment

Format JSON Result

Json data returned from my ASP.NET core server with: JsonConvert.SerializeObject(categories.Select(t => new { id = t.Id.ToString(), text = t.Name.ToLower() })) Looks: [ { "id": "7929d7ad-c7c3-45c5-b749-7633a478d55c", "text": "apparel" }, { "id": "e551cbc2-9069-4c99-a66b-5824ec2610b2", "text": "electronics" }] But I want result like: {"results":[ { "id": "7929d7ad-c7c3-45c5-b749-7633a478d55c", "text": "apparel" }, { "id": "e551cbc2-9069-4c99-a66b-5824ec2610b2", "text": "electronics" }]} for select2. How… Read More Format JSON Result

MRLeave a comment

Display HTML Select box Based on Selecting Option From Other Select box Noob Question

Trying to get innerHTML to display select box when an option of another select box is chosen. Here’s my code: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js&quot; integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css&quot; rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script&gt; <script> // In your Javascript (external .js resource or <script> tag) $(document).ready(function() { $("#cars2").select2(); }); </script> <!–Need help here–> <script> function… Read More Display HTML Select box Based on Selecting Option From Other Select box Noob Question

MRLeave a comment

Why isn't Select2 being applied to my select element?

This is the input I want to add my project https://select2.org/tagging but it’s show like this: I added Select2 installation links but it doesn’t work. What am I doing wrong? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css&quot; rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script&gt; <title>Document</title> </head> <body> <select class="form-control">… Read More Why isn't Select2 being applied to my select element?

MRLeave a comment