Twitter-bootstrap add-on
In order to be able to use this plugin on a page with multiple forms, I would recommend identifying the specific form that you are operating on. I can see that you are aware of the issue because you have been using the context parameter in most of the selectors, but since the &lt;form&gt; is an ancestor of this, it would need to be selected differently:

$("form").append(...


should be

$(this).ancestor('form').append(...


Also, I just wanted to mention a personal preference when working with HTML snippets generated by jQuery. Instead of having HTML in JS strings, like

$(this).ancestor("form").append(
    '&lt;input type="hidden" name="'+opts.inputId+'" id="'+opts.inputId+'" value="'+selectedValue+'" /&gt;'
);


I like to make hidden template elements, and then clone them, remove the .template class, set the attributes and inner html, and insert the clone into the document. For example:

// stylesheet:
.template { display: none; }

// html, near the end of the &lt;body&gt;:
&lt;input type="hidden" id="hiddenInputTemplate" class="template"/&gt;

// js:
$(this).ancestor('form').append(
    $('#hiddenInputTemplate')
    .clone()
    .removeClass('template')
    .attr('name', opts.inputId)
    .attr('id', opts.inputId)
    .val(selectedValue)
);


For a short example like this, it might not be worth the extra verbosity, but I do have reasons for doing it this way:


My editor can't highlight HTML code, and especially syntax errors, inside of JS strings.
I can read and understand this style a little faster, and I will read it more often than I will write it. Like I said, it's just personal preference.