Как я могу создать выпадающий список с полем ввода текста?

Question

Я пытаюсь создать простой выпадающий список с несколькими выборками (с флажками), но когда пользователь выбирает «Другое», он меняется на поле ввода текста.

Я нашел это решение от Alen Saqe, которое почти то, что я ищу (просто отсутствует флажок множественного выбора!), который был ранее в этой теме - HTML выберите форму с возможностью ввода пользовательского значения

Вот его код ниже и демо - http://jsfiddle.net/69wP6/4/

Есть какие-нибудь идеи, пожалуйста, как превратить это в выпадающий список с несколькими выборками?

HTML

<div id="billdesc">
    <select id="test">
      <option class="non" value="option1">Option1</option>
      <option class="non" value="option2">Option2</option>
      <option class="editable" value="other">Other</option>
    </select>
    <input class="editOption" style="display:none;"></input>
</div>

CSS

body{
    background: blue;
}
#billdesc{
    padding-top: 50px;
}
#test{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}

.editOption{
    width: 90%;
    height: 24px;
    position: relative;
    top: -30px

}

jQuery

var initialText = $('.editable').val();
$('.editOption').val(initialText);

$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();

if(selected == "editable"){
  $('.editOption').show();


  $('.editOption').keyup(function(){
      var editText = $('.editOption').val();
      $('.editable').val(editText);
      $('.editable').html(editText);
  });

}else{
  $('.editOption').hide();
}
});

Любая помощь очень ценится! Извиняюсь за то, что такой новичок!