SelectEditable

A plugin for jquery mobile for adding new options.

by scyrizales

HTML

<select>
    <option value="1">Algo</option>
    <option value="2">Algo Mas</option>
</select>

JavaScript

(function($){
    $.fn.selectEditable = function(options){
        var defaults = {
            textOption: "Editar",
            valueOption: "selectEditable",
            classOption: "inputSelectEditable"
        }
        var options = $.extend(defaults, options);
        var $that = this;
        var container = $that.closest("div.ui-select");
        var input = container.next();
        
        function addOption(_value, _text, _selected, _class){
            var option = $("<option></option>")
                .val(_value)
                .text(_text)
                .addClass(_class);
            if (_selected)
                option.attr("selected", "selected");
            
            $that.append(option);
        }
        
        function addCommandOption(){
            addOption(options.valueOption, options.textOption, false, options.classOption);
        }
        
        function removeCommandOption(){
            $that.find("option." + options.classOption).remove();
        }
        
        if (! input.hasClass(options.classOption)){
            input = $('<input type="text"/>')
                .addClass(options.classOption)
                .attr("name", $that.attr("name"))
                .insertAfter(container)
                .textinput()
                .hide();
        }
        
        addCommandOption();
        $that.trigger("refresh");
        
        $that.on("change", function(e){
            if (this.value=="selectEditable"){                
                container.hide();
                input.show();
                input.val("");
                input.focus();
            }
        });
        
        input.on("keypress", function(e){
            if (e.which == 13){
                input.hide();
                removeCommandOption();
                addOption(input.val(), input.val(), true);
                addCommandOption();
                container.show();
                $that.trigger("refresh").trigger("change");
  ...