在多個下拉列表中手動輸入值

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