This tutorial will show you how we can create combobox using jQuery. We will also alert the value when we select the item from the combobox or dropdown.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {
        //create a variable which holds key/value pairs
        var data = { 'Country0': 'India', 'Country1': 'Sri Lanka', 'Country2': 'USA', 'Country3': 'Australia', 'Country4': 'Newzeland'};
        //create a variable that holds select tag with an id="combo", you can also put 'class' attribute instead of combo
        var s = $('<select id="combo" />');
        //iterate through each key/value in 'data' and create an option tag out of it
        for(var val in data) {
            $('<option />', {value: val, text: data[val]}).appendTo(s);
        }
        
        //clicking on the button will display the combobox or dropdown - clicking on the
        //button it will append the dropdown to a paragraph
        $("#addCombo").on('click', function() {
            s.appendTo('p');
        });
        
        //when we select an item from dropdown or combobox then alert that value
        $(document).on('change',"#combo", function(){
            alert(this.value);
        });
    });
</script>
</script>
</head>
<body>
    <button id="addCombo">Add Combo</button>
    <p/>
</body>
</html>

Output

Dynamic Combobox using jQuery

Thanks for reading.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials | TwitterFacebook Google PlusLinkedin | Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *