php - ユーザーがこのjQueryUIの選択可能なドロップボックスから選択したものに基づいてリンクを作成します

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);
    });
});

作業例はこちら