如何在加载的页面上创建多个 select-2

Posted 2023-05-09

【中文标题】如何在加载的页面上创建多个 select-2

【英文标题】：How I can create multiple select-2 on a loaded page

【发布时间】：2019-12-29 14:09:41

【问题描述】：

我正在创建一个表单，允许我从数据库中添加项目。我可以添加我需要的项目数量。我还可以选择我要选择的项目类型。

问题发生在当我给按钮添加另一个项目时，这个负载但同时消除了另一个选择的 select-2 的功能。 这是我的代码；

我使用 jQuery、select-2 和 bootstrap。

我在页面加载后尝试加载，但这不起作用；我用.onloaddocument 设置了这个：

$('.select-dinamic').select2( width: '100%' );
$("#button_new_equip").click(function(event) 
var select_buton='<div class="from-group  mt-1"><div class="row "><div class="col-3"><select class="select-dinamic col" name="" id="instrument0"><option value="qwqwqw">wewewewe</option></select></div><div class="col-8"><select class="select-dinamic col" name="" id="Tip"><option value="qwqwqw">wewewewe</option></select></div></div></div><br>'

  $("#Insp_instruments").append(select_buton)
  $('.select-dinamic').select2( width: '100%' );
  /* Act on the event */
);

html
<div class="card container  ">
<div class="" id="Insp_instruments">
  <div class="from-group">
    <button type="button"id="button_new_equip" class="btn btn-primary "name="button"><i class="fas fa-plus"></i></button>
  </div>
<br>
        </div>
</div>
</div>

如果我尝试在表单中添加新的 select2 上一个选择丢失了选择2 属性。

【参考方案1】：

您正在为在运行时创建的所有新下拉列表使用静态 id 属性，即 id="instrument0" 和 id="Tip"。

所以

要么从你的 html 中删除 id 属性，它就会起作用 或以其他方式通过使用$('.select-dinamic').length 添加计数器使它们独一无二

第二个会更好地适应，您必须将两个选择的 id 更改为以下

id="instrument_' + $('.select-dinamic').length + '" id="Tip_' + $('.select-dinamic').length + '"

查看下面的工作演示

$("#button_new_equip").on('click', function(event) 
  var select_buton = '<div class="from-group  mt-1"><div class="row "><div class="col-3"><select class="select-dinamic col" name="" id="instrument_' + $('.select-dinamic').length + '"><option value="qwqwqw">wewewewe</option></select></div><div class="col-8"><select class="select-dinamic col" name="" id="Tip_' + $('.select-dinamic').length + '"><option value="qwqwqw">wewewewe</option></select></div></div></div><br>';

  $("#Insp_instruments").append(select_buton);
  $('.select-dinamic').select2(
    width: '100%'
  );

  /* Act on the event */
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c08b275b91.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="card container">
  <div class="" id="Insp_instruments">


    <div class="from-group">
      <button type="button" id="button_new_equip" class="btn btn-primary " name="button"><i class="fas fa-plus"></i></button>
    </div>

    <br>


  </div>

</div>

【讨论】：

@FOXSHOOT 见here

我很欣赏@FOXSHOOT