Jquery selectableウィジェットを使用してリスト項目を選択できるphpで生成されたリストがあります。すべての意図と目的のリストは次のとおりです。
<ul id="#select-image">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ul>
また、jQuery selectableは次のように宣言されます。
<script>
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').innerHTML;
console.log($variable);
}
});
});
</script>
リスト項目が選択された後、イベントはブラウザコンソールに出力される例で発生します。ただし、出力は「未定義」です。セレクター$('.ui-selected').
は、ブラウザーのコンソールにオブジェクトとして表示されるので正しいです。どこがおかしいの?
選択したオプションの値を取得するには、.innerHTML
の代わりに.val()
を使用します
.text()
を使用して、選択したオプションのテキストを取得します
修正してくれてありがとう:)
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').html();
console.log($variable);
}
});
});
または
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').text();
console.log($variable);
}
});
});
または
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').val();
console.log($variable);
}
});
});
パラメータui
には、選択したdom要素への参照であるselected
というプロパティがあります。その要素でinnerHTML
を呼び出すことができます。
コード$('.ui-selected').innerHTML
は、クラスui-selected
を持つdom要素のjQueryラッパー要素のinnerHTML
プロパティを返します。
$(function () {
$("#select-image").selectable({
selected: function (event, ui) {
var $variable = ui.selected.innerHTML; // or $(ui.selected).html()
console.log($variable);
}
});
});
デモ: フィドル