jquery - Manually type in value in Multiple Drop down lists -

jquery - Manually type in value in Multiple Drop down lists -

i need create multiple drop-down selector lists on webpage give user alternative of typing alternate values. found solution here: manually type in value in "select" / drop-down html list?

the reply posted user "pawelmech" works single dropdown list, couldn't create work multiple dropdowns. help appreciated.

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

id value has unique. utilize class or selector. updated code expand example.

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

jquery html