Login/Register
select2 on select data-select2-id attribute added in all div before select option
Asked Answered
javascriptjquery-select2
O

2

6

I'm using select2, When someone select value in select dropdown. select2 added data-select2-id in to all div that come before select2, not same data-select2-id value but increase each time.

have a look in below image

enter image description here

      $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()
      });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
</head>
<body>
  
      <div class="row">
        <div class="form-group">
          <label>Minimal</label>
          <select class="form-control select2" style="width: 100%;">
            <option selected="selected">Alabama</option>
            <option>Alaska</option>
            <option>California</option>
            <option>Delaware</option>
            <option>Tennessee</option>
            <option>Texas</option>
            <option>Washington</option>
          </select>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
  </body>
</html>
Ordinary answered 15/9, 2020 at 16:22 Comment(8)
Hey Saini, can you please rephrase your question? What do you want to achieve? – Laurynlausanne
i want to stop add data-select2-id in all over page. and why its happening – Ordinary
If you look on the documentation page you can see that it happens in their examples as well. That means it is part of the select2 functionality and not your use case. That also means you should look into issues on their github, and if you do not find e.g. this one: github.com/select2/select2/issues/5921 Then you should create your own and take it from there. Seeing how it's the same image, I'm going to assume you posted that issue. You should edit it and add your example and also inform that it happens e.g. here: select2.org/getting-started/basic-usage – Parlay
@Parlay i don't know this is first time happening with me in select2 and as you marked github issue, Yes i have raised that issue but still no update and i'm middle of something. So i posted that issue here also along with example so everyone can see by clicking code. this is messing with my code data-select2-id part – Ordinary
@Parlay this is not select2 functionality, as you see my code when i'm selecting anything in select drop-down, it's added data-select2-id in my page and as you share select2 official page, there is nothing such thing happeing. you can more see it by inspect menu – Ordinary
@DeepakSaini Im using select2 v4.0.3 in a project and it does not seem to add this "data-select2-id". Perhaps you can use that version instead? – Parlay
@Parlay thanks for this idea, yes this is latest release issue. as of now i'm using old version – Ordinary
Yeah I can confirm this as well, not sure what that is about but there's shouldn't be any reason for this – Valle
C
0

This has something to do with line-height: 28px causing a 1 px overflow in the parent which then gets internally as a scrollable element. Can be solved by adding the following CSS to the stylesheet:

.select2-container .select2-selection {
  overflow: hidden;
}
Condolent answered 30/5 at 19:51 Comment(0)
C
-1

its probably not what you are looking for, but if you use <input> instead of <select> this doesn't happen for me.

I also had to put the <input> inside a separate <div> on some pages.

Cookstove answered 11/11, 2021 at 4:34 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.