Question

插件演示：http://jqueryui.com/selectable/#serialize

你好，我不太明白这个“插件”，特别是

result.append( " #" + ( index + 1) );＆amp;

<span>You've selected:</span> <span id="select-result">none</span>.

我希望用户能够选择以下“按钮”之一，然后显示一条消息来代替所选的号码（如演示中所示）

所以：你选择了：＃2。将是：你选择了：英国，请转到此并做那些等......

我猜猜最简单的方法是用JavaScript

if "select-result" = 1 then
else

有点事吗？

任何帮助都会很棒！我希望这不是一个愚蠢的问题......

代码：

<html>
<head>
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
  stop: function() {
    var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
      var index = $( "#selectable li" ).index( this );
      result.append( " #" + ( index + 1) );
    });
  }
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
<li class="ui-widget-content">UK</li>
<li class="ui-widget-content">USA</li>
<li class="ui-widget-content">FR</li>
<li class="ui-widget-content">AU</li>
<li class="ui-widget-content">CA</li>
<li class="ui-widget-content">DE</li>
</ol>
</body>
</html>

Answer 1

var index = $( "#selectable li" ).index( this );

这会抓取我们传递的元素的索引。我们不需要这一行。

result.append( " #" + ( index + 1) );

索引是降序DOM时元素出现的位置。

我们可以将上述内容更改为一个简单的内容。

$( ".ui-selected", this ).text().appendTo(result);

编辑：见上文，this可能会引用整个ul，因此我们需要按所选项目对其进行过滤。如果您允许多选，请参阅下文。

$( ".ui-selected", this ).each(function(){
    $(this).text().appendTo(result);
});

Answer 2

插件中的示例显示了所选索引..您不需要这样做...您需要做的是获取所选文本并以span显示..所以使用.. {{ 1}}或html() ..

试试这个

text()

JQuery - select上的select-result show消息

2 个答案: