如何避免多次将数据附加到select标记

Question

在Ajax请求中，我从服务器获得此响应

{
    "screen": [
        {
            "screen_name": "SCR1",
            "screen_id": "1"
        },
        {
            "screen_name": "SCR2",
            "screen_id": "2"
        },
        {
            "screen_name": "SCR3",
            "screen_id": "3"
        },
        {
            "screen_name": "SCR4",
            "screen_id": "4"
        },
        {
            "screen_name": "SCR5",
            "screen_id": "5"
        },
        {
            "screen_name": "BIGSCR",
            "screen_id": "6"
        }
    ]
}

我面临的问题是，每当我点击下拉列表时，数据都会多次附加到名为SCname的选择HTML

我将此数据附加到选择标记，屏幕看起来就是这样

这是我的代码

$(document).on("click", "#SCname", function() {
     var htmloptions = '';        
   $.ajax({
        type: 'GET',
        url: url+'/OMS/oms1/getscreens?location_id='+location_id,
        jsonpCallback: 'jsonCallback',
        dataType: 'jsonp',
        jsonp: false,
        success: function(response) {
            var jsondata = JSON.stringify(response);
            jsondata = JSON.parse(jsondata);
        for (var i = 0; i < jsondata.screen.length; i++) {
        var screenName = jsondata.screen[i].screen_name.trim();
        var screenId = jsondata.screen[i].screen_id.trim();
        htmloptions+='<option value="'+screenId+'">'+screenName+'</option>';

    }

    $('#SCname').append(htmloptions);

        },
        error: function(e) {

            alert('into error');

        }
    });

});


                <select name="" id="SCname">
                    <option> Write Screen Name</option>
                </select>

即使我每次都清除htmloptipns，但仍然会多次附加数据，有人可以让我知道如何避免吗？

Answer 1

每次单击选择时，您都会将数据附加到$('#SCname')，而不会重置它。清除htmloptions是不够的，因为它只是一个局部变量。在附加新值之前重置$('#SCname')的内容。