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

在一个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中

我将此数据附加到一个select标记，屏幕看起来是这样的

这是我的密码

$(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，但仍然会多次向其中添加数据，有人能告诉我如何避免这种情况吗？？？

您每次单击select时都会向$SCname'添加数据，而不会重置它。清除htmloptions是不够的，因为它只是一个局部变量。在添加新值之前，请重置$'SCname'的内容。

非常感谢，我使用此行$'SCname'。empty；