Javascript jqueryappend将li添加到ul

我正试图为使用jquery进行的每个选择维护一个列表

这是我的HTML基本模板

<div class="content">
    <div class="contentreplace"></div>
    <div class="buildoptions"><?=$buildoptions?></div>
</div>

以下是我的javascript：

$(function() {
    $( ".selectable" ).selectable({
  stop: function() {
    var html2 = "<div class='steps'> Select the dependant Field </div>";
    $('#select-result').empty().append(html2);

    var html = "";
    $( ".ui-selected", this ).each(function() {
        var ecid = $(this).data('ecid');
        var field = $(this).data('field');
        html = "<li class='depend' data-field='"+field+"' data-ecid='"+ ecid+"'>"+ecid+" - "+field+"</li>";
        $("#select-result ul.ul-depend").append(html)
    });

  }
});
});

以下是可选择的html：

    <span class="ecdataset"><?=$stuff[0]['dataset']?></span>    
    <span class="ecvisit"><?=$stuff[0]['visit']?></span>
<ol class="selectable">
<?php
foreach ($stuff as $variable)
{?>
<li class="ui-widget-content" data-field="<?=$variable['field']?>" data-ecid="<?=$variable['ecspecs_id']?>">
    <textarea ><?=$variable['ecnum']?></textarea>
    <span class="ecfield"><?=$variable['field']?></span>
</li>
<?php }

？>

所以，理论上，当他们选择一个项目时，它不应该附加到无序列表的选择结果中，并添加字符串吗？有人知道为什么不会吗

我已经对它进行了测试，并且正在从.ui所选区域接收正确的数据，并将数字输入到字符串中

---

谢谢

您没有在ul上附加任何内容，因为您正在使用该行删除它

$('#select-result').empty().append(html2);

$'select-result'。empty将删除select-result元素中的所有元素。因此，$select result ul.ul-depend不是有效的选择器。我已经修改了你的代码，它现在正在工作

将步骤元素添加到标记中

<div id="select-result">
    <div class='steps'></div>
    <ul class='ul-depend'>Nothing Selected</ul>
</div>

以及明确的ul

这是工作样本，

---

可选类应用元素在哪里？@ChamikaSandamal在问题中添加了它，这肯定是它。非常感谢。

<div id="select-result">
    <div class='steps'></div>
    <ul class='ul-depend'>Nothing Selected</ul>
</div>

$('#select-result .steps').empty().append(html2);

$("#select-result ul.ul-depend").empty();