다른 콘텐츠를 로드한 후 Select 2 드롭다운 메뉴를 새로 고치는 방법

다른 콘텐츠를 로드한 후 Select 2 드롭다운 메뉴를 새로 고치는 방법

드롭다운 메뉴 조합으로 Select 2를 사용하고 있습니다."Countrys"와 "State/Provinces" 메뉴가 각각 하나 있습니다.선택한 국가에 따라 내용에서 "주/도약" 드롭다운이 변경됩니다.상태/프로비스는 데이터베이스에서 ajax를 사용하여 가져온 다음 다음과 같이 표시됩니다.

$display_output = '<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="Choose a Country..."> ';
$display_output .= '<option value="" selected>Select a State</option> ';

while ($state_details = $this->fetch_array($sql_select_states))
{
    $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>';
}

$display_output .= '</select>';

지금까지는 좋아.모든 지역이 올바르게 변경되지만 처음에 로드될 때 Select 2는 상태 드롭다운에 대해 "정의되지 않음"을 표시합니다.

data-placeholder="Choose a Country..."

로드 시 선택된 국가가 "미국"이고 주 목록이 입력되지만 기본값 또는 선택된 국가가 없기 때문일 수 있습니다."정의되지 않음"으로 표시되지 않도록 기본값을 정의하는 다른 방법이 있습니까?

또 다른 (하지만 덜 중요한) 문제는 예를 들어 "미국"을 선택하고 "아리조나"를 선택했을 때, 그 사람이 "캐나다"로 바뀌면, "아리조나" 상태는 그대로 유지되지만 드롭다운을 열 때 캐나다 각 주를 선택할 수 있다는 것입니다.다른 나라를 선택했을 때 도를 다시 선택할 때까지 일시적으로 기본값으로 되돌릴 수 있는 방법이 있습니까?

현재 로딩 코드는 다음과 같습니다.

<script>
$(document).ready(function() { $("#state").select2(); });
</script>

3 을 선택합니다.*

중복될 수 있으므로 컨트롤을 다시 빌드하지 않고 선택 2 데이터 업데이트를 참조하십시오.또 다른 방법은 select2 요소를 삭제하고 다시 작성하는 것입니다.

$("#dropdown").select2("destroy");

$("#dropdown").select2();

국가 변경 시 주/지역을 재설정하는 데 문제가 있는 경우 다음을 사용하여 현재 값을 지우십시오.

$("#dropdown").select2("val", "");

거의 모든 기능의 개요가 기재되어 있는 메뉴얼은, http://ivaynberg.github.io/select2/ 에서 참조할 수 있습니다.Select2는 다음과 같은 이벤트를 지원합니다.change를 사용하여 후속 드롭다운을 업데이트할 수 있습니다.

$("#dropdown").on("change", function(e) {});

4.* Update를 선택합니다.

이제 다음을 사용하여 컨트롤을 재구성하지 않고 데이터/목록을 업데이트할 수 있습니다.

fooBarDropdown.select2({
    data: fromAccountData
});

일반적으로 다른 컴포넌트가 변경 이벤트를 수신하거나 사용자 지정 이벤트 핸들러가 연결되어 부작용이 발생할 수 있습니다.Select2에는 변경 외에 트리거할 수 있는 사용자 지정 이벤트(예: select2:update)가 없습니다.*변경을 트리거하여 jQuery의 이벤트 네임스페이스를 사용하여 스코프를 Select2로 제한할 수 있습니다.select2 event를 선택합니다.

$('#state').trigger('change.select2'); // Notify only Select2 of changes

select2 가지고 있다placeholder파라미터를 지정합니다.을 하세요.

$("#state").select2({
   placeholder: "Choose a Country"
 });

선택 항목을 추가한 후 다음 스크립트를 사용합니다.

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

마세요destroy.

마지막으로 ajax 호출 후 select2의 재초기화 문제를 해결했습니다.

이것은 에이잭스의 성공함수라고 할 수 있습니다.

". ".selector"로 치환하는 마십시오<select class="selector">★★★★★★ 。

jQuery('.select2-container').remove();

jQuery('.selector').select2({
   placeholder: "Placeholder text",
   allowClear: true
});

jQuery('.select2-container').css('width','100%');

111119에도 같은 문제가 발생했습니다 괴사하게 돼서 죄송합니다유일하게 도움이 된 것은 다음 솔루션이었습니다.

var drop = $('#product_1');   // get our element, **must be unique**;
var settings = drop.attr('data-krajee-select2');  pick krajee attrs of our elem;
var drop_id = drop.attr('id');  // take id 
settings = window[settings];  // take previous settings from window;
drop.select2(settings);  // initialize select2 element with it;
$('.kv-plugin-loading').remove(); // remove loading animation;

이 솔루션은 그다지 훌륭하고 정밀하지 않은 솔루션일 수도 있습니다.또, 아직 그 동작의 원리와 이유를 명확하게 이해하지 못했을지도 모릅니다만, 이것이 제 select 2의 드롭 다운을 유효하게 유지하는 유일한 이유였습니다.이 솔루션이 도움이 되거나 문제를 해결할 때 올바른 결정을 내릴 수 있기를 바랍니다.

해결 방법:

콘텐츠가 Ajax를 통해 로드되면 더 이상 '.select2'와 같은 일반적인 공격을 할 수 없습니다.이제 다른 요소에는 이 클래스가 select2에 의해 생성된 범위로 포함되기 때문입니다.

따라서 ajax를 로드한 후 select2가 이미 인스턴스화되어 있는지 확인하고 개별적으로 인스턴스화하는 메서드를 호출해야 합니다.

jQuery('select.select2').each(function (i, obj) {
    if (!jQuery(obj).hasClass("select2-hidden-accessible")) {                
        jQuery(obj).select2();
    }
});

에 관한 제 기사

링크 설명을 여기에 입력하십시오.

select2 데이터 교체에만 관심이 있다고 가정합니다.

$('#selector').html('').select2({
    data: //new data
})

★★★select2과 같은

페이지가 로드될 때

$(".mynames").select2();

ajax 함수 성공 후 ajax가 왔을 때 다시 호출한다.

$(".names").select2();

언급URL : https://stackoverflow.com/questions/17818210/how-to-refresh-select2-dropdown-menu-after-ajax-loading-different-content