IT Share you

JQuery로 드롭 다운 목록 지우기

shareyou 2020. 11. 12. 20:33
반응형

JQuery로 드롭 다운 목록 지우기


드롭 다운 목록을 서버의 데이터로 채우는이 작은 함수를 작성했습니다.

function fillDropDown(url, dropdown) {
    $.ajax({
        url: url,
        dataType: "json"
    }).done(function (data) {
        // Clear drop down list
        $(dropdown).find("option").remove(); <<<<<< Issue here
        // Fill drop down list with new data
        $(data).each(function () {
            // Create option
            var $option = $("<option />");
            // Add value and text to option
            $option.attr("value", this.value).text(this.text);
            // Add option to drop down list
            $(dropdown).append($option);
        });
    });
}

그런 다음 다음과 같이 함수를 호출 할 수 있습니다.

fillDropDown("/someurl/getdata", $("#dropdownbox1"))

드롭 다운 목록에서 오래된 데이터를 지우는 한 줄을 제외하고는 모든 것이 완벽하게 작동합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

이 코드를 개선하는 데 도움이 될 수있는 모든 팁도 높이 평가됩니다.


그냥 사용하십시오 .empty():

// snip...
}).done(function (data) {
    // Clear drop down list
    $(dropdown).empty(); // <<<<<< No more issue here
    // Fill drop down list with new data
    $(data).each(function () {
        // snip...

옵션을 구성 하는 더 간결한 방법있습니다.

// snip...
$(data).each(function () {
    $("<option />", {
        val: this.value,
        text: this.text
    }).appendTo(dropdown);
});

나는 내 드롭 다운 .empty()뿐만 아니라 둘 다 시도했지만 둘 다 .remove()느렸다. 거의 4,000 개의 옵션이 있었기 때문에.

나는 .html("")내 상태에서 훨씬 더 빠른 것을 사용했습니다 .
아래는

  $(dropdown).html("");

<select id="ddlvalue" name="ddlvaluename">
<option value='0' disabled selected>Select Value</option>
<option value='1' >Value 1</option>
<option value='2' >Value 2</option>
</select>

<input type="submit" id="btn_submit" value="click me"/>



<script>
$('#btn_submit').on('click',function(){
      $('#ddlvalue').val(0);
});
</script>

에 새 파일 options저장 variable한 다음을 사용 .html(variable)하여 container?

참고URL : https://stackoverflow.com/questions/9909326/clear-dropdownlist-with-jquery

반응형