javascript - jquery追加将li添加到ul

Question

我正在尝试维护 <li> 的列表使用 jquery 进行的每个选择都可选

这是我的 HTML 基本模板

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

$buildoptions是:

<p id="feedback">
    <span>You've selected:</span> 
<div id="select-result"><ul class='ul-depend'>Nothing Selected</ul></div>
</p>

这是我的 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 }

？>

所以，理论上，当他们选择一个项目时，它不应该附加到 #select-result ul 后面吗？无序列表，并添加<li>字符串？有人知道为什么它不会吗？

我已经测试过了，我从 .ui-selected 收到了正确的数据区域并将数字输入字符串。

谢谢

Answer 1

$('#select-result').empty() 将删除 #select-result 元素内的所有元素。因此 $("#select-result ul.ul-depend") 不是有效的选择器。我已经修改了您的代码，现在可以使用了。

将 steps 元素添加到标记中，

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

并清除它，

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

并清除ul，

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

这是工作示例， http://jsfiddle.net/FBY8y/