How do change text in Dropdownlist ?

Hello guys. I have use Dropdownlist . I try change text in Dropdownlist , but i can not. Seem it losts some data .

i.e : in Dropdownlist i have three data: AREA1,AREA2,AREA3, it load from ajax  .

<select id="cbo_area"></select>
   function cb_area() {$.ajax(
                {
                    type: "POST",
                    url: "../BUS/WebService.asmx/LIST_AREA", //// get list all area
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {$("#cbo_area").html('');$.each($.parseJSON(data.d), function (idx, obj) {$("#cbo_area").append(
                                '<option value="' + obj.AREA_ID + '">' + obj.AREA_NAME + '</option>');
                        });
                    },
                    error: function (data) {
                        alert("HTML Error Load Combo");
                    }
                });
            }

Ok, in my table , i click at row then click edit button, it will show data from row to Dropdownlist. it work but it only show one data , in this case "AREA2" (lost AREA1 and AREA3 in Dropdown) , i try click another row , i get that right , in this case "AREA3"  (lost AREA1 nad AREA2 in Dropdown), etc...

$('#bt_edit').click(function (e) {
                    var DTO = {
                        'area_id': area_id_temp
                    };$.ajax(
                    {
                        type: "POST",
                        url: "../BUS/WebService.asmx/AREA_NAME",  /// get name area follow id
                        data: JSON.stringify(DTO),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {$("#cbo_area").html('');
                           //cb_area(); // no work , it will loop data two times
                           /// it only will one data in Dropdownlist$.each($.parseJSON(data.d), function (idx, obj) {$("#cbo_area").append(
                                    '<option value="' + obj.AREA_ID + '">' + obj.AREA_NAME + '</option>');
                            });
                           //cb_area();  // no work, it will load wrong data
                        },
                        error: function (data) {
                            alert("HTML Error Load Edit");
                        }
                    });
});

I want to click a row in table , Dropdownlist will change text from row and concurrentwith fieldsremaining data. i.e : when i click a row have "AREA1" , Dropdownlist text will change "AREA1" and more "AREA2" , "AREA3".Please give me some advice about this . Thank you.