动态添加新的组合(选择)框

时间:2012-05-08 02:23:42

标签: php javascript html

在我的页面中,我有一个带有添加按钮的组合框。单击添加按钮时,如何在原始组合框下创建新的组合框?如果再次单击,它将生成另一个组合框。每个组合框内的值都是从数据库中调用的。

2 个答案:

答案 0 :(得分:4)

这是一个例子,尽管你必须自己计算出中间层和后端部分。

示例: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" />​

修改

您还应该阅读jQuery's AJAX method

答案 1 :(得分:1)

jquery的任何想法? jquery clone()将帮助您解决此问题

JQuery .clone()

实时示例:http://jsfiddle.net/laupkram/6LBNs/

如果您的问题尝试研究这个

Dynamic Loading of ComboBox using jQuery and Ajax