如何使用javascript在点击下拉列表中创建文本框

我是javascript新手。我想创建一个国家管辖下的城市。但我想给用户一个"其他"城市下的选项。单击其他时，应打开一个文本框以输入城市名称。我该怎么做？

我的jsfiddle如下：http://jsfiddle.net/stAAm/547/

我的代码是：

Html:

    <select id="source">
        <option selected="selected" value="BR">Select a state</option>
        <option value="FR">Andaman & Nicobar Islands</option>
        <option value="DE">Andhra Pradesh</option>            
    </select>
    <select id="source2a" class="cities">
        <option selected="selected" value="BR">Select a City in Andaman & Nicobar Islands</option>
        <option value="FR">City 1</option>
        <option value="DE">City 2</option>
        <option value="DE">Other</option>            
    </select>
     <select id="source2b" class="cities">
        <option selected="selected" value="BR">Select a City in Andhra Pradesh</option>
        <option value="FR">City 1</option>
        <option value="DE">City 2</option>
        <option value="IN">Other</option>            
    </select>

Javascript：

    var i = 0;
    $(document).ready(function(){
    var bindClickToToggle = function(element){
    element.click(function(){
        $(this).parents('.dropdown').find('dd ul').toggle();
    });
};
$('#source').change(function () {
    if ($('#source option:selected').text() == "Andaman & Nicobar Islands"){
        $('.cities').hide();
        $('#source2a').show();
    } else if ($('#source option:selected').text() == "Andhra Pradesh"){
        $('.cities').hide();
        $('#source2b').show();
    } else {
        $('.cities').hide();
    } });

var bindClickToUpdateSelect = function(element){
    element.click(function(){
        var text = element.html();
        var value = element.find('span.value').html();
        var dropdown = element.parents('.dropdown');
        var select = $( dropdown.attr('target') );
        dropdown.children('dt').find('a').html(text);
        dropdown.find('dd ul').hide();
        select.attr('value', value);
    });
};
var getItemHtml = function(element){
    return '<dt><a href="#">'+element.text()+'<span class="value">'+element.attr('value')+'</span></a></dt>';
};
var getDropdownHtml = function(id, target){
    return '<dl id="target'+id+'" class="dropdown" target="#'+target.attr('id')+'"></dl>';
};
var getEnclosingHtml = function(){
    return '<dd><ul></ul></dd>';
};
var createDropDown = function(element, appendTo){
    var selected = element.find('option[selected]');
    var options = element.find('option');
    appendTo.append(getDropdownHtml(i, element));
    var target = appendTo.find('#target' + i);
    target.append(getItemHtml(selected));
    target.append(getEnclosingHtml());
    var appendOptionsTo = target.find('ul');
    options.each(function(){
        appendOptionsTo.append(getItemHtml($(this)));
    });
    appendOptionsTo.find('a').each(function(){
        bindClickToUpdateSelect($(this));
    });
    i++;
};

$('a').each(function(){
    bindClickToToggle($(this));
    $(this).click(function(){
        $(this).parents('ul').hide();
    });
});
$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown")){
        $(".dropdown dd ul").hide();
    }
});
});

css：

    body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.75em;
color: #000;
}
.desc {
color: #6b6b6b;
}
.desc a {
color: #0092dd;
}
.dropdown dd, .dropdown dt, .dropdown ul {
margin: 0px;
padding: 0px;
}
.dropdown dd {
position: relative;
}
.cities {display: none;}
.dropdown a, .dropdown a:visited {
color: #816c5b;
text-decoration: none;
outline: none;
}
.dropdown a:hover {
color: #5d4617;
}
.dropdown dt a:hover {
color: #5d4617;
border: 1px solid #d0c9af;
}
.dropdown dt a {
background: #e4dfcb url(arrow.png) no-repeat scroll right center;
display: block;
padding-right: 20px;
border: 1px solid #d4ca9a;
width: 160px;
padding: 5px;
}
.dropdown dt a span {
cursor: pointer;
display: block;
}
.dropdown dd ul {
background: #e4dfcb none repeat scroll 0 0;
border: 1px solid #d4ca9a;
color: #C5C0B0;
display: none;
left: 0px;
padding: 5px 0px;
position: absolute;
top: 2px;
width: auto;
min-width: 170px;
list-style: none;  
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #d0c9af;
}
.dropdown img.flag {
border: none;
vertical-align: middle;
margin-left: 10px;
}
.flagvisibility {
display: none;
}