php - 根据用户从此 jQuery UI 可选下拉框中选择的内容创建链接

Question

我正在使用这个：

http://jqueryui.com/demos/selectable/#method-option

这是我的代码：

<ol id="selectable">
    <?php foreach ($collection as $key=> $word): ?>
    <li class="ui-widget-content"> <?php echo $word ?> </li>
    <?php endforeach ?>
</ol>

如何获得根据用户选择创建的超链接？每次用的词都不一样。

Answer 1

使用selected事件：

$(function() {
    $("#selectable").selectable({
        selected: function(event, ui) {
            alert(ui.selected.innerHTML);
        }
    });
});​

ui.selected是所选项目的 DOM 元素

工作示例

如果您将data属性添加到li具有更多详细信息的 ，href它会更容易：

<ol id="selectable">
    <?php foreach ($collection as $key=> $word): ?>
    <li class="ui-widget-content" data-href="<?php echo $href ?>"> <?php echo $word ?> </li>
    <?php endforeach ?>
</ol>

然后

$(function() {
    $("#selectable").selectable({
        selected: function(event, ui) {
            alert($(ui.selected).data('href'));
        }
    });
});​

这里的工作示例

要使用所选项目创建链接（锚点），您可以执行以下操作：

$(function() {
    $("#selectable").selectable({
        selected: function(event, ui) {
            $item = $(ui.selected);
            $href = $item.data('href');
            $text = $item.text();

            $('<a />').attr({
                href: $href
            }).text($text).append('<br />').appendTo('#links');
        }
    });
});​

这里的例子

更新

你可以做这样的事情来存储选定的项目，直到它需要 - 即按下按钮：

// create temp variable to store the selected element
var selected;

$(function() {
    $("#selectable").selectable({
        selected: function(event, ui) {
           selected = ui.selected;
        }

    });

    $('#getSel').click(function() {
        // do what you want with the Element here
        alert(selected.innerHTML);
    });
});

这里的工作示例