使用 JavaScript 动态加载多个 select 框

Question

在我的 CodeIgniter 视图页面中，我想显示一个可搜索的 select 框。我可以使用添加按钮操作任意数量的可搜索 select 框的副本。 ajax 调用填充的可搜索 select 框数据。这是我的要求，我在下面添加图片以阐明我的问题。

我在下面提供我的 CodeIgniter 控制器函数，它处理 ajax 请求：

public function ajax_load()
{

    if ($this->input->is_ajax_request())
    {

        $labtests = $this->Laboratory_service_model->getLabTests(); //gets result_array()

        if (!empty($labtests))
        {

            $data['return'] = true;
            $data['a'] = $labtests;
            
            echo json_encode($data);
        }
        else
        {
            $data['return'] = false;
            $data['message'] = 'cant get data from table';
            echo json_encode($data);
        }
    }
    else
    {
        $data['return'] = false;
        $data['message'] = 'Ajax request not getting';
        echo json_encode($data);
    }



}

我的 JavaScript 文件在这里提供：

$.ajax({
        type: 'POST',
        url: surl + 'LabServices/ajax_load',

        success: function (data)
        {
            var ndata = JSON.parse(data);


            if (ndata.return == true)
            {
                var myOptions = ndata.a;

                var mySelect = $('#mySelect');

                myOptions.forEach(function(data)
                {
                    mySelect.append(
                        $('<option></option>').val(data.id).html(data.name)
                    );
                });

            }
            else if (ndata.return == false)
            {
                $('.error').text(ndata.message);
            }
            else
            {
                $('.error').text('something went wrong');
            }

        },
        error: function ()
        {
            $('.error').text('something went wrong');
        }

    });

我已经使用 ajax 从控制器获取数据并在 CodeIgniter 中的 select2 库的帮助下创建了一个可搜索的 select 框。但是我不知道如何动态操作带有按钮的select框。请给我一个解决方案的朋友..

我的查看页面部分是：

                <a class="col-md-6 mb-3 htmlitems">
                    <label>Lab Tests</label>
                    <div class="form-control ">
                        <select id="mySelect" class="" style="width: 100%;" name="tests">

                        </select>
                    </div>
                    <a id="" class="btn btn-danger add_spec"> + </a>
                </div>

提前致谢信义

Answer 1

因为您的 select 选项将相同，所以单击 add_spec 而不是调用 ajax 再次检索选项，您可以只 clone 已添加的选项 select，然后将此 cloned 添加到您的 html 中。然后，使用 find('select:last').select2();.

初始化它

演示代码 :

$("#mySelect").select2();
$(".add_spec").click(function() {
  var options = $(".htmlitems:first").find("[name=tests]").clone(); //get select and clone it
  //generate html and add options inside select
  var result = '<div class="col-md-6 mb-3 htmlitems"><label>Lab Tests</label><div class="form-control "><select class="new_added" style="width: 100%;" name="tests">' + $(options).html() + '</select><button class="remove">-</button></div>'
  $(result).appendTo("#result") //add generated htmls 
  $('#result').find('select:last').select2(); //initialize it

});
//on click of remove
$(document).on("click", ".remove", function() {
  $(this).closest(".htmlitems").remove() //get closest div remove it
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<div id="result">
  <div class="col-md-6 mb-3 htmlitems">
    <label>Lab Tests</label>
    <div class="form-control ">
      <select id="mySelect" class="" style="width: 100%;" name="tests">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
    <a id="" class="btn btn-danger add_spec"> + </a>
  </div>
</div>

使用 JavaScript 动态加载多个 select 框

Dynamically loading multiple select box using JavaScript

javascript

ajax

codeigniter