我有一个php生成的列表,其列表项可以使用jquery selectable小部件进行选择。所有意图和目的的列表是:
<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').
是正确的,因为它在浏览器的控制台中显示为对象。我哪里错了?
答案 0 :(得分:51)
答案 1 :(得分:3)
使用.val()
代替.innerHTML
获取所选选项的值
使用.text()
获取所选选项的文字
感谢您纠正:)
答案 2 :(得分:3)
$(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);
}
});
});
答案 3 :(得分:0)
参数ui
有一个名为selected
的属性,它是对所选dom元素的引用,您可以在该元素上调用innerHTML
。
您的代码$('.ui-selected').innerHTML
尝试为类innerHTML
ui-selected
属性
$(function () {
$("#select-image").selectable({
selected: function (event, ui) {
var $variable = ui.selected.innerHTML; // or $(ui.selected).html()
console.log($variable);
}
});
});
演示:Fiddle