Display selected VALUE from dropdown instead of the ID

Question

I am using jEditable to allow inline edit for my DataTables.

I use a dropdown that allow user to select the new value and update it back to db.

My drop down is consist of a list of value/id pair, the id will be used to link to another db table to retrieve the respective value.

 public JsonResult GetFoodTypes()
    {
        // Select a list of food types as editable drop down
        var foodTypes = dbEntities.FoodTypes.ToList();
        var list = foodTypes.Select(f => new[]{f.FoodTypeID.ToString(), f.FoodTypeName.ToString()});
        return Json(list, JsonRequestBehavior.AllowGet);
    }

Currently I able to display the VALUE ( for my case, is the name: eg, Fruit, Rice..etc ) in the drop down, and once user submit, I store the ID in the table.

My problem is, once user submit the new value, the text field of my table display the ID but not the VALUE. I need to refresh the page for my table to display correct VALUE (ie, the name) based on the selected ID.

Any idea how can I have my table displaying the VALUE directly after user submit, without refreshing?

Answer 1

i guess i am doing something similar here:

callback: function (value, settings) {
            var temp = getFoodTypeName(value);
            //alert(temp);
            $(this).text(temp);
        }

I use callback and set the dropdown field text to the Name instead of the ID, but I wonder is it a very bad way??