jQuery에서 선택한 플러그인으로 양식을 재설정하려면 어떻게해야합니까?


80

Jquery Chosen 플러그인을 사용select 하는 양식에 많은 요소가 있습니다 . 양식을 재설정하려면 어떻게해야합니까? 다음은 작동하지 않습니다.

<input type="reset" />

2
수락 된 답변을 Jack O'Neill의 답변으로 변경해야합니다. 다른 솔루션은 더 이상 작동하지 않습니다.
James

1
수락 된 답변을 Jack O'Neill answere로 변경하십시오. 최신 버전 트리거는 이제 : updated라고 불리기 때문에
Well Wisher 2013

1
@Jame & Well wisher : 플러그인이 업데이트 될 때마다이 사이트에서 답변 된 모든 질문을 변경하는 것은 아닙니다. 그 당시 해결책은 정확했습니다. RobertWaddell이 답변에 대한 의견을 남겼습니다. 이것이 갈 길이라고 생각합니다.
GôTô 2014 년

답변:


188

필드의 값을 재설정 한 다음 liszt:updated입력 에서 이벤트 를 트리거하여 업데이트해야합니다. 여기에서 작업 예제를 사용하여 바이올린을 만들었습니다.

http://jsfiddle.net/VSpa3/3/

$(".chzn-select").chosen();
$('a').click(function(){
    $(".chzn-select").val('').trigger("liszt:updated");
});​

선택한 v1.0이 출시 된 이후로 트리거는 이제 'chosen : updated'라고합니다. 이 새 버전을 사용하는 사람은 누구나 다음을 사용하여 업데이트를 트리거해야합니다.

$(".chosen-select").val('').trigger("chosen:updated");

15
좋은 대답입니다! Chosen의 최신 버전을 사용하면 "("chosen : updated ")"이어야합니다.
Robert Waddell

2
좋은 대답입니다! 그러나 원래 자리 표시자를 재설정하고 다시 표시 할 수 있습니까?
Niels Sønderbæk 2014

1
그래도 작동이 안되는. Ajax 호출 (jQuery load () 메서드)을 통해 선택 항목을 동적으로 대체하고 있습니다. 그런 다음 새로운 selected (). trigger ( "chosen : updated"); 작동하지 않습니다. 선택한 검색은 여전히 ​​새 선택에서 작동하지 않습니다.
Marco Marsala 2014 년

'multiple : true'선택 필드에 이것을 사용하면 Placeholder도 제거되는 것 같습니다. 지운 후 자리 표시자를 유지하는 방법을 알고 있습니까?
David Basalla

1
아, 나는 ... 찾은 것 같아요 $selectField.val([]).trigger('chosen:updated')트릭 할 것 같다
데이비드 Basalla

52

선택한 v1.0이 출시 된 이후로 트리거는 이제 'chosen : updated'라고합니다. 이 새 버전을 사용하는 사람은 누구나 다음을 사용하여 업데이트를 트리거해야합니다.

$(".chosen-select").val('').trigger("chosen:updated");

1
변경으로 인해 정답이되어야합니다. 내가 찾은 다른 솔루션은 제대로 작동하지 않습니다. 감사합니다!
James

1
하지만 작동하지 않습니다! 선택이 동일한 ID / 이름을 가진 다른 선택 (jQuery load () 메서드)으로 동적으로 대체되면 검색이 새 선택에서 작동을 중지합니다. 새로운 선택에서 .chosen () 호출, .chosen ( 'destroy') 호출, .trigger ( "chosen : updated") 호출 및 이들의 조합을 시도했습니다.
Marco Marsala 2014 년

14

이것을 시도해 볼 수 있습니다.

$('select').chosen('destroy');  

$('select').prop("selectedIndex", -1);   
$('select').chosen();

11

재설정이 자연스럽게 작동하도록하려면 다음을 사용하십시오.

$("input[type='reset'], button[type='reset']").click(function(e){
    e.preventDefault();

    var form = $(this).closest('form').get(0);
    form.reset();

    $(form).find('select').each(function(i, v) {
        $(v).trigger('chosen:updated');
    });
}

1
form.reset ()을 사용한 다음 selected : update를 트리거하는 것이 특히 원래 표시된대로 양식을 표시하려는 경우 최상의 솔루션입니다. .val ( '') 설정은 양식을 기본값으로 되 돌리지 않습니다.
Just Plain High

이것은 효과가 있습니다. DOM에 동적으로 추가 된 콤보 박스 (선택)를 수동으로 재설정해야합니다.
Marco Marsala 2014 년


0

더 번거롭지 않은 접근 방식을 위해 ... 입력이 <form>태그 내부에 있다고 가정합니다 .

<form>
    <!-- your selects go here and any other input fields -->
    <input type="reset" value="Reset"> 
</form>

이것이 내가 할 일입니다.

$("input[type='reset'], button[type='reset']").click(function(e){
      setTimeout(function(){ $("select").trigger("chosen:updated"); }, 50);
});

여기에서 바이올린을 참조 하십시오 .


@MarcoMarsala 바이올린을 보면 작동합니다. 코드가 바이올린과 어떻게 다른가요?
prograhammer

1
1.2.0으로 업데이트했고 모두 번거 로움없이 작업하기 시작했습니다. setTimeout도 필요하지 않았습니다. 아마도 1.12의 버그 였을 것입니다
Marco Marsala 2014 년

0

이전 옵션 중 어느 것도 나를 위해 작동하지 않습니다. 나는 약간의 네이티브 자바 스크립트를 사용하더라도 오래된 학교처럼해야했습니다. 코드는 다음과 같습니다.

$('#dllSample option').each(function(){
     $(this)[0].selected = false;   
});
$("#dllSample").trigger("chosen:updated");

0

여기에 대한 답변 중 어느 것도 나를 위해 일하지 않았습니다. 다중 속성으로 선택한 선택을 사용하고 있습니다. 일반 제출 양식 버튼도 트릭을 수행하지 않았습니다. 그래서 클릭하면 기능이 있습니다.

//Gets the selected values
var selected = [];
    for (var option of document.getElementById('mySelect').options) {
        if (option.selected) {
            selected.push(option.value);
        }

    }

//Resets the form
document.getElementById('form1').reset();

//Chosen values doesnt get reset, so we do this manually
//Removes the values selected by clicking on the x icon
$link = $('a.search-choice-close');
            var i;
            for (i = 0; i < selected.length; i++) {
                $link[i].click();
            }

-1

때로는 선택한 선택을 재설정해야합니다.

나는 이것을한다

jQuery.fn.chosen_reset = function(n){
  $(this).chosen('destroy');
  $(this).prop('selectedIndex', 0);
  $(this).chosen(n)
}

그리고 옵션을 인수로 사용하여이 함수를 이렇게 호출합니다.

$('select').chosen_reset({width:'369px'});

-2

jQuery에서 이와 같은 것이 작동합니다.

<input name="Text1" id="something" type="text">

<input type="reset" id="reset_me"/>


$("#reset_me").click(function() { 
$("#something").val("");
});

$ j ( '. chzn-select'). each (function () {$ j (this) .val ( "")}); 선택한 태그를 지우지 않습니다
PH

보낸 사람 @PH 당신은 도움말을 우리를 위해 코드의 예를 들어 줄 수 있다면
MHowey에게

sottenad가 방금 대답했습니다. pls는 위의 jsfiddle 링크를 참조하십시오. 이제 내 코드는 $ j ( '. chzn-select'). each (function () {$ j (this) .val ( ""). trigger ( "liszt : updated");});
PH
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.