【问题标题】:Adding Checkboxes into jquery dilaogue box dynamically将复选框动态添加到jquery对话框中
【发布时间】:2013-11-08 13:15:41
【问题描述】:

我有一个显示复选框的 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)
            }
        });
    });

这里的数据以 [Mumbai, Delhi, Bangalore] 的形式存在,并且这些数据以 arraylist 的形式从 java servlet 中检索出来。

这是我在对话框中显示复选框的代码,但复选框值是硬编码的,我需要从 window.load 数据动态显示。复选框名称、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;
        });

我们将不胜感激。

【问题讨论】:

    标签: javascript jquery html ajax checkbox


    【解决方案1】:

    ''试试这个..

    $(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)
                }
            });
        });
    

    【讨论】:

    • 谢谢先生的回答我有一个疑问如何获取 var 输出并在对话框中使用..
    • 在页面上创建一个空的 div
      在输出中获取数据后,您可以像这样附加到对话框并打开对话框 $('#dialog-confirm ').html(输出); $('#dialog-confirm').dialog('open');
    • 如果您有疑问,请与我的 ans sute 一起参考,您会明白stackoverflow.com/questions/3694693/…
    • 先生,我的对话框需要在链接的点击事件上打开,然后怎么做
    • $("#someButton").click(function() { //你的函数 }
    【解决方案2】:

    1) 创建空的唯一 div

    &lt;div id="content"&gt;&lt;/div&gt;

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

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

    3) 从 #content

    创建对话框

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签