>source

CodeIgniter보기 페이지에서 검색 가능한 선택 상자를 표시하고 싶습니다. 그리고 추가 버튼을 사용하여 검색 가능한 선택 상자의 복사본을 원하는만큼 조작 할 수 있습니다. ajax 호출로 채워진 검색 가능한 선택 상자 데이터입니다. 이것은 내 요구 사항이며, 문제를 명확히하기 위해 아래 그림을 추가하고 있습니다.

아래에서 ajax 요청을 처리하는 CodeIgniter 컨트롤러 기능을 제공하고 있습니다.

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 라이브러리를 사용하여 검색 가능한 선택 상자를 만들었습니다. 하지만 버튼으로 선택 상자를 동적으로 조작하는 방법을 모르겠습니다. 솔루션 친구를주세요 ..

내보기 페이지 섹션은 다음과 같습니다.

               <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>

미리 감사드립니다 Shinoy


  • 답변 # 1

    선택 옵션이 동일하므로 add_spec 옵션을 다시 검색하기 위해 ajax를 호출하는 대신 clone 이미 추가 된 옵션을 선택한 다음 추가 cloned 당신의 htmls에. 그런 다음 사용하여 초기화하십시오. 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 - socketip expressjs listen은 함수가 아닙니다
  • 다음 Access에서 큰 연결된 데이터베이스 검사