如何在使用 qrcode 扫描后将数据插入 select2 搜索输入

Question

我想要的示例结果：

我已经做了二维码扫描和select2。它工作正常。问题是我希望在 select2 下拉列表中搜索数据“SBD2P3000002”。已经尝试使用输入标签及其工作，但使用 select2 下拉菜单，它不起作用。

这里是我的代码：

      <video id="preview" width="100%"></video>
            //this input form working
            <input type="text" id="text">
        
          //this not working
          <div class="row">
            <div class="input-group mb-3 col-md-12">
              <select class="custom-select select2" id="add_order" name="variants">
                <option selected>Tambah Pesanan...</option>
                <?php
                  if(!empty($variants))
                  {
                    foreach ($variants as $key) { ?>
                      <option 

                      value="<?php echo $key['variant_id'] ?>"
                      data-sn="<?php echo $key['v_sn'] ?>"
                      data-price="<?php echo $key['v_kaunter'] ?>"
                      data-size="<?php echo $key['v_size'] ?>"
                      data-length="<?php echo $key['v_length'] ?>"
                      data-width="<?php echo $key['v_width'] ?>"
                      data-weight="<?php echo $key['v_weight'] ?>"
                      data-sb="<?php echo $key['v_sb'] ?>"
                      data-pay="<?php echo $key['v_pay'] ?>"
                      data-margin="<?php echo $key['v_margin'] ?>"
                      data-margin_pay="<?php echo $key['v_margin_pay'] ?>"
                      data-mutu="<?php echo $key['mutu'] ?>"
                      data-setup_price="<?php echo $key['setup_price'] ?>"
                      data-serial_berat_price="<?php echo $key['serial_berat'] ?>"
                      data-product_name="<?php echo $key['product_name'] ?>"
                      data-product_id="<?php echo $key['product_id'] ?>"

                      ><?= $key['v_sn'] ?></option>
                    <?php }
                  }
                ?>
              </select>
            </div>

<script type="text/javascript">
  let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
  scanner.addListener('scan', function (content) {
    console.log(content);
  });
  Instascan.Camera.getCameras().then(function (cameras) {
    if (cameras.length > 0) {
      scanner.start(cameras[1]);
    } else {
      console.error('No cameras found.');
    }
  }).catch(function (e) {
    console.error(e);
  });
  scanner.addListener('scan',function(c){
    $search = document.getElementById("text").value=c;
    $("#add_order").data("select2").dropdown.$search.val()
  });
</script>

Answer 1

您是否已初始化 select2？我在你的编码中没有看到...

$('#add_order').select2();

为确保您的 DOM 已加载，请将您的脚本封装在此函数中

$(function(){
  //Your script
  console.log($('#add_order').lenght);//should display 1!
  $('#add_order').select2();
   :
   :
});

要在搜索框中输入一个值（存在），你必须写：

$('#add_order').val("yourvalue").trigger("change");