programing

JQuery를 사용하여 드롭다운 목록 지우기

css3 2023. 9. 17. 13:26

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

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

이 코드를 개선하는 데 도움이 될 수 있는 모든 팁 또한 대단히 감사합니다.

사용하기만 하면 됩니다.

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