动态地将复选框添加到jquery dilaogue框中

时间:2013-10-29 11:41:47

标签: javascript jquery html ajax checkbox

我有一个jquery对话框,显示复选框。这些复选框是硬编码的。现在我有一个要求,我需要从数据库动态显示复选框。 要获取数据库中复选框的值,我在window.load()

上实现了ajax调用
$(window).load(function() {
        $.ajax({
            type: 'GET',
            url: 'Sites',
            success: function(data) {
                debugger;
                var city=JSON.parse(data);
            for(var i in city)
            {
              output ='<input type="checkbox"   id="'+city[i]+'" name="'+city[i]+'" value="'+city[i]+'" />'+city[i]+'<br />'
            }
            console.log(output)
            }
        });
    });

这里的数据存在于合作者 [孟买,德里,班加罗尔] 中,这些数据是以arraylist的形式从java servlet中恢复的。

这是我在代码框中显示复选框的代码,但复选框值是硬编码的,我需要从window.load数据动态显示..Checkboxes名称,id和值应该与从window.load ajax获取的值相同调用..

这是我在jquery中的硬编码脚本..

var $dialog = $('<div></div>')
        .html('<form id="myform" action="">'+output+'</form>')
        .dialog({
            autoOpen: false,
            title: 'Select Sites',
            buttons: {
                "Submit": function() {  $('form#myform').submit();},
                "Cancel": function() {$(this).dialog("close");}
            }
        });
        });

这是按钮点击,我需要打开对话框..

 $('#ssites').click(function(evt) {
            variable="";
            $dialog.dialog('open');
            evt.preventDefault();
            // prevent the default action, e.g., following a link
            return false;
        });

任何帮助都将受到高度赞赏。

2 个答案:

答案 0 :(得分:2)

''试试这个..

$(window).load(function() {
        $.ajax({
            type: 'GET',
            url: 'Sites',
            success: function(data) {
                var city=data.city
                for(var i in city)
                {
                   var output='<input type="checkbox"   id="'+city[i]+'" name="'+city[i]+'" value="'+city[i]+'" />'+city[i]+'<br />'
                }
                consoloe.log(output)
            }
        });
    });

答案 1 :(得分:0)

1)创建空的唯一div

<div id="content"></div>

2)加载并解析DB数据。取决于输入格式 - html / json

success: function(data) { $("content").html(data); // or json parse }

3)从 #content

创建对话框