title: Slickgrid Combobox how to implement value-display type binding
body: <p>Using examples from web, I've tried to implement my own customized combobox (YesNoEditor) where it allows both display and value members to be saved. The idea is to have the HTML output of SELECT tag to contain both an option value and an actual text to be displayed like so:</p>
  
  <pre><code>("&lt;SELECT tabIndex='0' class='editor-yesno'&gt;&lt;OPTION value='valuemember'&gt;DisplayMember&lt;/OPTION&gt;&lt;/SELECT&gt;");
  </code></pre>
  
  <p>And here's my modified version of YesNoEditor from slick.editors.js</p>
  
  <pre><code>    function YesNoSelectEditor(args) {
        var $select;
        var defaultValue;
        var scope = this;
  
        this.init = function () {
  
            if (args.column.options &amp;&amp; args.column.display) {
                opt_display = args.column.display.split(',');
                opt_values = args.column.options.split(',');
            } else {
                opt_values = "yes,no".split(',');
            }
            option_str = "";
            for (i in opt_values) {
                v = opt_values[i];
                d = opt_display[i];
                option_str += "&lt;OPTION value='" + v + "'&gt;" + d + "&lt;/OPTION&gt;";
            }
            $select = $("&lt;SELECT tabIndex='0' class='editor-select'&gt;" + option_str + "&lt;/SELECT&gt;");
            $select.appendTo(args.container);
            $select.focus();
        };
  
        this.getDefaultValue = function () {
            return defaultValue;
        };
  
  
        this.destroy = function () {
            $select.remove();
        };
  
        this.focus = function () {
            $select.focus();
        };
  
        this.loadValue = function (item) {
            defaultValue = item[args.column.field];
            $select.val(defaultValue);
        };
  
        this.getSelectValue = function () {
            if (args.column.options) {
                return $select.val();
            }
        }
  
        this.serializeValue = function () {
            if (args.column.options) {
                return $select.children("option:selected").text();
            } else {
                return ($select.val() == "yes");
            }
        };
  
        this.applyValue = function (item, state) {
            item[args.column.field] = state;
        };
  
        this.isValueChanged = function () {
            return ($select.val() != defaultValue);
        };
  
        this.validate = function () {
            return {
                valid: true,
                msg: null
            };
        };
  
        this.init();
    }
  </code></pre>
  
  <p>This mostly works, except when I try to manually click the combobox, it sporadically changes the text value to something other than its previously selected value. For instance, the combobox could've had display value 2 but as soon as I click on the cell to activate the combobox, the display value changes to 1. </p>
  
  <p>Is there any good alternative method to accomplish what I need?</p>
  
  <p>-----Edit2</p>
  
  <p>Here's an example of how I define the column using YesNoEditor</p>
  
  <pre><code>{ id: "Type", name: "Customer Type", width: 100, field: "Type", editor: Slick.Editors.YesNoSelect, options: customerTypeList.join(","), display: customerTypeList.join(",")},
  </code></pre>