【问题标题】:jQuery Selectable Get Text ValuejQuery Selectable 获取文本值
【发布时间】:2013-03-25 17:30:31
【问题描述】:

我有一个项目的无序列表——这个列表可能有数百个项目——当用户点击一个项目时,我会在选项的右侧显示他们的选择。我正在使用 jQuery selectable 和 sortable 的组合来执行此操作(尽管单击选项后我会丢失可排序),并且为用户显示的值是所选项目的索引。我想为用户显示订单项的文本值,但正如预期的那样,获取 text() 值会返回所有订单项的文本值。

如何只获取选定的文本并为用户显示?

HTML:

<ul id="list">
    <li id="Test1">Item 1</li>
    <li id="Test2">Item 2</li>
    <li id="Test3">Item 3</li>
    <li id="Test4">Item 4</li>
    <li id="Test5">Item 5</li>
</ul>

<p id="feedback">
<span>You've selected items:</span>    
    <ul id="select-result">
     <span id="select-resultSpan">
        <li>No Items Selected</li>
     </span>
    </ul>    
</p>

JS:

$(function () {
    $("#list").selectable({
        stop: function () {
            var result = $("#select-resultSpan").empty();
            $(".ui-selected", this).each(function () {
                var index = $("#list li").index(this);
                result.append("<li>" + (index + 1) + "</li>");
            });
        }
    });
});

完整示例在 JSFiddle 上:http://jsfiddle.net/Jk6ZH/1/

提前致谢。

【问题讨论】:

    标签: jquery selectable


    【解决方案1】:

    如果我没看错,认为这就是你所需要的:

    $(".ui-selected", this).each(function () {
    
        // this works for me
        result.append("<li>" + $(this).text() + "</li>");
    });
    

    http://jsfiddle.net/JuJDt/

    【讨论】:

      【解决方案2】:

      试试这个:

      $("#list li").on("click",function() {
        $("#select-resultSpan").append($(this).text());
      })
      

      【讨论】:

        【解决方案3】:
        You have to find innerHTML from index value.
        you can also get other attributes with this method.
        
        $(function () {
                $("#list").selectable({
                    stop: function () {
                        var result = $("#select-resultSpan").empty();
                        $(".ui-selected", this).each(function () {
                            var index = $("#list li").index(this);
                            var text = $("#list li").get(index).innerHTML; //  for id you can replace .innerHTML with .id 
                            result.append("<li>" + (text) + "</li>");
                        });
                    }
                });
            });
        

        see here

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-06-22
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多