javascript - 如何使用javascript在点击下拉菜单上创建一个文本框？

Question

我是 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;
}

Answer 1

查看更新:JSFiddle

我添加了:

<input type="text" id="otherCity" style="display:none"></input>

并添加了事件:

$(".cities").change(function(){
        if($(this).find("option:selected").text() == "Other"){
            $("#otherCity").show();
        }
        else{
            $("#otherCity").hide();
        }
    });