动态添加新的组合（选择）框

In my page, I have a combo box with an add button. How do I create a new combo box below the original combo box when I clicked the add button? If clicked again, it will produce another combo box. The value inside each combo box is called from the database.

Here's an example, though you'll have to work out the middle tier and back end portion yourself.

Example: http://jsfiddle.net/9hvbt/3/

JavaScript

$('#btnAdd').click(function(){
    //Use Ajax to talk to your server (middle tier)
    $.ajax({
        url: '/echo/json/', //Replace with your URL to return Database data (JSON format)
        dataType: 'json', 
        type: 'get', 
        success: function(data){
            //Use the returned data to pass into CreateDropDown (Hard coded for an example)
            CreateDropDown(["Item 1", "Item 2", "Item 3"]); 
        }
    });
}); 

function CreateDropDown(data){
    var $newSelect = $('<select />'); 
    $.each(data, function(i, val){
        $newSelect.append($('<option />', {
            'text':val
        }));            
    });  
    $newSelect.appendTo('#dropDowns'); 
}

​ ​ HTML

<div id='dropDowns'>
    <select>
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
    </select>
</div>
<input type='button' id='btnAdd' value="Add" />​

EDIT

You should also read up on jQuery's AJAX method

any ideas with jquery? jquery clone() will help you to solve this problem

JQuery .clone()

A LIVE EXAMPLE : http://jsfiddle.net/laupkram/6LBNs/

in the case of your problem try to study this one

Dynamic Loading of ComboBox using jQuery and Ajax