向jQuery UI對話框模態添加多個字段

Question

我有一個對話框模式，我想向他們添加一個選擇字段和一個表。

對話框模態，選擇字段和表格字段都有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對話框表單中添加兩個字段

Answer 1

每次使用該方法時，.html（）都會覆蓋div內容。 因此請使用.append（）而不是.html（），例如：

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

或者你也可以使用

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