First timer jquery plugin problem

I want to write a plugin for a select menu with the bottom field being "custom" and selecting that will result in an input box.

This is my first time writing a jquery plugin and I want to seek your advice on how I can go about doing it:

So i have the following code:

(function($) { 
  const CUSTOM_CLASS = 'custom';
  const HOLDER_CLASS = 'holder';

  $.fn.editableDrop = function() { 
    function _make_input() { 
      /* Ultimately, we want:
       * <select> </select>
       * <span>
       *  <input /> 
       *  <a href='#'>Submit</a><a href='#'>Cancel</a>
       * </span>
       */

      var $holder = $('<span>开发者_JAVA百科').css('display', 'none');
      $holder.append( $('<input type="text">').attr('class', HOLDER_CLASS) );
      $holder.append( $('<a class="cancel" href="#">Cancel<a/>'));
      $holder.append( $('<a class="edit" href="#">Edit<a/>'));
      return $holder;
    }

    function main(jq) {
      /* Takes a select tag jquery object and does the following:
       * -1) First put submit there
       * 0) Inject input as a sibling with display none.
       * 1) Inject a final option at the bottom
       * 2) When that is focused, change to input with a cancel button
       * 3) When cancel is pressed turn back to dropdown
       * 4) Check that everytime pressing Enter will disable the input
       */
      var $select = $(jq);
      var $inputs = _make_input()
      var $holder = $('.'+HOLDER_CLASS, $inputs);
      var $edit = $('.edit', $inputs);
      var $cancel = $('.cancel', $inputs);

      $inputs.insertAfter($select);
      $last = $("<option>").attr('class', CUSTOM_CLASS).text('custom').appendTo($select);
      $holder.val( $('option:first-child', $select).text() );   // set initial value

      // Don't return false here since they will be wrapped inside functions. 
      // return false inside the handler

      var edit = function() { 
        // Doesn't clear custom text. Do it yourself
        $holder.attr('disabled', false);
        $inputs.css('display', 'inline');
        $select.css('display', 'none');
        $edit.css('display', 'none');
        $cancel.css('display', 'inline');
      }

      var reset = function() { 
        $inputs.css('display', 'none');
        $select.css('display', 'inline');
        $('option:first-child', $select).attr('selected', true);    // Defaults sets the first element to selected
        $holder.val( $('option:first-child', $select).text() );     // Resets the value
      }

      var submit = function() { 
        $holder.attr( 'disabled', true );
        $edit.css('display', 'inline');
        $cancel.css('display', 'none');
      }

      var value = function() { 
        return $holder.val();
      }


      /* These are just event listeners */
      $select.change(function() { 
        var $sel = $select.children('*[selected]');
        $holder.val( $sel.val());
        if ($sel.attr('class') == CUSTOM_CLASS) {   // if the class name is selected, turn into input box
          $holder.val("");            // clears custom text
          edit();
          return false;
        }
      });

      $('a.cancel', $inputs).click(function() { 
          cancel();
          return false;
      });

      $holder.keypress( function( event) { 
        if (event.which == 13) { 
          submit();
          return false;
        }
      });

      $edit.click( function() { 
        edit();
        return false;
      });

      return $(this);
    }

  };
})(jQuery);

I apologise for the code being a bit long. But what it does is basically this:

1. When you pass me a select element, it creates the last option, "custom".
2. Selecting custom will change into an input box
3. When the input box appear you can press cancel
4. etc etc

First of all, I want to make the following functions public: 1. reset() 2. value()

How should I go about writing this? 1. I only want to make the dom once.

To make reset and value public you can do the following:

$.fn.editableDrop = function() {
    // ...
};

// placing them under `editableDrop`
$.fn.editableDrop.reset = function() { };
$.fn.editableDrop.value = function() { };

To access variables from editableDrop you need to expose them

$.fn.editableDrop.yourVar = 1;

Another approach is to make a "class"

var Editable = function(){
    this.yourVar = 2;   // public
    var notPublic = 1;  // private
};

var obj = (new Editable());
obj.yourVar;   // 2
obj.notPublic; // undefined