jquery append to add li to ul

Question

I am trying to maintain a list of <li> 's for every selection made using jquery selectable

Here is my basic template for the HTML

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

$buildoptions is :

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

Here is my 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)
    });

  }
});
});

Here is selectable 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 }

?>

So, in theory, When they select an item, shouldn't it append to the #select-result ul unordered list, and add the <li> string? Anyone see why it wouldnt?

I have tested it, and I am receiving the correct data from the .ui-selected area and feeding numbers into the string.

Thanks

Answer 1

你没有向ul附加任何内容，因为你要删除它

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

Answer 2

$('#select-result').empty() will remove all the elements inside the #select-result element. So $("#select-result ul.ul-depend") is not a valid selector. I have modified your code and it is working now.

add steps element to the markup,

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

and clear it instead,

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

and clear ul as well,

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

here is the working sample, http://jsfiddle.net/FBY8y/