将多个字段添加到jquery ui对话框模态

时间:2017-07-13 12:43:33

标签: javascript jquery jquery-ui

我有一个对话框模式,我想为它们添加一个选择字段和一个表。

对话框模式,选择字段和表格字段

有html描述
<div id="task_properties" style="display:none;">
</div>

<div id="properties-list" class="ui-widget">

        <table id="list_task_properties" class="ui-widget_task ui-widget-content">
        <thead>
            <tr class="ui-widget-header">
                <th>Id</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        </table>
    </div>

  <select class="dropdown-toggle" id="selection" style="display:none;">
 </select>

并且有一个jquery代码,我在其中管理对话模式

function openTaskPropertiesAssignee(taskId){
$('#task_properties').dialog({
    height: 520,
    width: 400,
    modal: true,
    title: taskId,
    draggable:true,
    open: function () {
        $('#selection').css("display","block");
        $('#list_task_properties').css("display","block");
        $(this).html($('#selection'));
        $(this).html($('#list_task_properties'));

    },
    buttons: {
        AddPropertie:{
            'class':"add_propertie_button",
            text: 'add propertie',
            click:function(){

            }
        },
        Ok: function () {
            $(this).dialog("close");
        }
    }
}); 
$("#selection").change(function(){
    console.log($("#selection :selected").text());
});}

但是当我跑步时,我只有我添加的最后一个字段(表格),所以我无法看到这两个字段(表格和选择)。

任何人都可以告诉我哪里错了,或者举例说明如何在jquery Ui对话框中添加两个字段

1 个答案:

答案 0 :(得分:0)

每次使用该方法时,

.html()都会覆盖div内容。所以使用.append()而不是.html(),像:

$(this).append($('#selection'));
$(this).append($('#list_task_properties'));

或者您也可以使用

$(this).html($('#selection'));
$(this).append($('#list_task_properties'));