在多个下拉列表中手动输入值

Question

我需要在网页上创建多个下拉选择器列表，该列表还为用户提供了键入替代值的选项。我在这里找到了解决方案：Manually type in a value in a "Select" / Drop-down HTML list?

用户“pawelmech”发布的答案适用于单个下拉列表，但我无法使其适用于多个下拉列表。任何帮助将不胜感激。

JQuery:

(function ($) 
{
 $.fn.otherize = function (option_text, texts_placeholder_text) {
    oSel = $(this);
    option_id = oSel.attr('id') + '_other';
    textbox_id = option_id + "_tb";

    this.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>");
    this.after("<input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/>");
    this.change(

    function () {
        oTbox = oSel.parent().children('#' + textbox_id);
        oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide();
    });

    $("#" + textbox_id).change(

    function () {
        $("#" + option_id).val($("#" + textbox_id).val());
    });
};
}(jQuery));

HTML：

<form>
    <select class="otherize_me">
        <option value=1>option 1</option>
        <option value=2>option 2</option>
        <option value=3>option 3</option>
    </select>
<br><br>
    <select class="otherize_me">
        <option value=4>option 4</option>
        <option value=5>option 5</option>
        <option value=6>option 6</option>
    </select>
<br><br>
    <select class="otherize_me">
        <option value=7>option 7</option>
        <option value=8>option 8</option>
        <option value=9>option 9</option>
    </select>
</form>

JSFiddle

Answer 1

id 值必须是唯一的。使用类或其他选择器。更新了代码以扩展示例。

HTML：

<form>
    <select id="otherize_me_1">
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
    </select>
    <br/>
    <br/>
    <select id="otherize_me_2">
        <option value="4">option 4</option>
        <option value="5">option 5</option>
        <option value="6">option 6</option>
    </select>
    <br/>
    <br/>
    <select id="otherize_me_3">
        <option value="7">option 7</option>
        <option value="8">option 8</option>
        <option value="9">option 9</option>
    </select>
</form>

JS：

(function ($) {
    $.fn.otherize = function (option_text, texts_placeholder_text) {
        var oSel = $(this);
        var option_id = oSel.attr('id') + '_other';
        var textbox_id = option_id + "_tb";

        oSel.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>");
        oSel.after("<input type='text' id='" + textbox_id + "' style='display: none;' placeholder='" + texts_placeholder_text + "'/>");
        oSel.change(function () {
            oTbox = $('#' + textbox_id);
            oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide();
        });

        $("#" + textbox_id).change(function () {
            $("#" + option_id).val($(this).val());
        });
    };
}(jQuery));

$(function () {
    $("#otherize_me_1").otherize("Other..", "Other1");
    $("#otherize_me_2").otherize("Other..", "Other2");
    $("#otherize_me_3").otherize("Other..", "Other3");
});

JSFiddle