0

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

您好，我不太了解这个“插件”，特别是

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

<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>
4

2 回答 2

0 
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);
});
于 2013-03-25T05:49:40.470 回答
0

插件中的示例显示了选定的索引..您不需要这样做...您需要做的是获取选定的文本并在跨度中显示它..所以使用..html()或text()..

尝试这个

 $(function() {
   $( "#selectable" ).selectable({
    stop: function() {
         var result = $( "#select-result" );
         result.html($(this).html());  // result.text($(this).text());
    }
  });
});
于 2013-03-25T06:01:29.227 回答