Feature suggestion: Custom Text/Value keys for select fields

[mreis1]

Wouldn't It be great to be able to customize which values should be used as key values in select fields?

[mreis1]

Updated:

AT LINES 3355 changed the following

$.extend(Select.prototype, {
        renderList: function() {
            this.$input.empty();
            var _that = this;
            var fillItems = function($el, data) {
                var attr;
                if($.isArray(data)) {
                    for(var i=0; i<data.length; i++) {
                        attr = {};
                        if(data[i].children) {
                            attr.label = data[i][_that.options.keyToText];
                            $el.append(fillItems($('<optgroup>', attr), data[i].children));
                        } else {
                            attr.value = data[i][_that.options.keyToValue];
                            if(data[i].disabled) {
                                attr.disabled = true;
                            }
                            $el.append($('<option>', attr).text(data[i][_that.options.keyToText]));
                        }
                    }
                }
                return $el;
            };

            fillItems(this.$input, this.sourceData);

            this.setClass();

            //enter submit
            this.$input.on('keydown.editable', function (e) {
                if (e.which === 13) {
                    $(this).closest('form').submit();
                }
            });
        },

        value2htmlFinal: function(value, element) {
            var text = '',
                items = $.fn.editableutils.itemsByValue(value, this.sourceData);

            if(items.length) {
                text = items[0].text;
            }

            //$(element).text(text);
            $.fn.editabletypes.abstractinput.prototype.value2html.call(this, text, element);
        },

        autosubmit: function() {
            this.$input.off('keydown.editable').on('change.editable', function(){
                $(this).closest('form').submit();
            });
        }
    });

    Select.defaults = $.extend({}, $.fn.editabletypes.list.defaults, {
        /**
        @property tpl
        @default <select></select>
        **/
        tpl:'<select></select>',
        keyToText: 'text',
        keyToValue: 'value'
    });

Updated bootstrap-editable.js to support the following settings when setting up and editable Changes made into X-editable - v1.5.1;

$('#el').editable({
   keyToValue: 'KEY_TO_BE_USED_AS_VALUE', //default is value
  keyToText: 'KEY_TO_BE_USED_AS_TEXT", //default is text

})

[mreis1]

Despite of loading the data inside the select menu correctly, when changing the value, the link doesn't text doesn't get updated. Could someone help me fixing this?

[jasondavis]

In your 2nd post you said lline 3355 but did not mention:

• which file
• if code was replaced or added in, removed, or what?

In the next post you mentioned the bootstrap-editable.js file so I looked at that file on line 3355 which doesn't seem to be what you are talking about shown here...

In a quick on-page search for code similar to your example I did find $.extend(Select.prototype, { on line 3154 which can be seen here: https://github.com/vitalets/x-editable/blob/master/dist/bootstrap-editable/js/bootstrap-editable.js#L3154

@mreis1 So can you tell me which file you modified? Cn you give me the correct line or section?. And then tell me, does your code snippet replace some existing code, get added before or after a line, or some other type of mod? I want to be able to make the mod that you made and then be able to test with it.

[mreis1]

@jasondavis you are right but I don't remember why I mentioned the line 3355, but the line that you reference (3154) is exactly where my modified code shall be placed starting on 3154 and ending on 3215.