Generate Select instead of Input

Due to restrictions of editing some of my templates I really need your help with:

1. generate a select list with predefined options instead of input field
2. input field to be hidden after select is generated
3. when some option selected transfer that option's value into that hidden input

I provide some HTML to be more clear:

This is what we've got in the template before jQuery is applied:

<input type="text" id="myId" name="myName" value="">

This is what we need it to be after jQuery is applied

<select id="mySelect">
   <option>a</option>
   <option>b</option>
   <option>c</option>
</select>

<input type="text" id="myId" name="myName" value="" style="display:none">

Please note: I need to predefine options value and their quantity. Sele开发者_运维知识库ct must be generated right where input field was.

Also: I also really need to generate two or more select lists in some templates and transfer selected option's values consistently into one input.

Example:

   <select id="mySelect1">
     <option>a</option>
   </select>

   <select id="mySelect2">
     <option>b</option>
   </select>

   <input type="text" id="myId" name="myName" value="a b" style="display:none"> //a + b added

Thanks in advance!

1. Hide your input box:

   $("#myId").hide();

2. Dynamically generate a select-Box:

var select = "<select onchange=\"$('#myId').val(this.value);\">"+
             "<option value=\"a\">a</option>" +
             "<option value=\"b\">b</option>" +
             "<option value=\"c\">c</option>" +
             "</select>";

1. Insert this box before or after you input-box:

$(select).insertBefore($("#myId"));

or

$(select).insertAfter($("#myId"));