How to create a text box on click dropdown using javascript?

Question

I am new in javascript. I want to create a city under state. But I want to give an option to user for "other" under city. On click other a text box should be open for input the city name. How can I do this?

My jsfiddle is below: http://jsfiddle.net/stAAm/547/

My codes are:

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

Matthew North · Accepted Answer · 2015-02-19 11:01:51Z

2

See updated: JSFiddle

I've added:

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

And have added the event:

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

answered Feb 19, 2015 at 11:01

Matthew North

5551 gold badge5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Priyank Dey Over a year ago

Thanks for the code. But when I click back to "select a state" still text box is visible. how can i hide this?

Jordi Castilla · Accepted Answer · 2015-02-19 10:52:10Z

1

You must define an input hidden field:

<input id="other_city" hidden>

And, In the same way you check for the first dropdown show the field:

if ($('#source2b option:selected').text() == "Other"){
    $('#other_city').show();
} else {
    $('#other_city').hide();
}

answered Feb 19, 2015 at 10:52

Jordi Castilla

27.1k8 gold badges73 silver badges113 bronze badges

Comments

snehatulsi · Accepted Answer · 2015-02-19 10:53:23Z

1

Try this: http://jsfiddle.net/stAAm/549/

$('#source2b').change(function () {
        if($('#source2b option:selected').text() == "Other")
            $('#other').show();
        else
            $('#other').hide();
    });

On change of second select. toggle the input box.

answered Feb 19, 2015 at 10:53

snehatulsi

2471 silver badge12 bronze badges

2 Comments

Priyank Dey Over a year ago

Thanks for your answer. But when I click back to "select a state" still text box is visible. how can i hide this?

snehatulsi Over a year ago

Hide on change of state. $('#source').change(function () { $('#other').hide(); 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(); } });

Collectives™ on Stack Overflow

How to create a text box on click dropdown using javascript?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related