0

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

这是我的 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区域接收正确的数据并将数字输入字符串。

谢谢

4

2 回答 2

1

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

$('#select-result').empty().append(html2);
于 2013-05-28T16:59:04.447 回答
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/

于 2013-05-28T17:15:46.967 回答