JQuery - 选择结果显示选择消息答案

【问题标题】：JQuery - select-result show message on selectJQuery - 选择结果显示选择消息
【发布时间】：2013-03-25 05:45:51
【问题描述】：

插件演示：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>

【问题讨论】：

标签： javascript jquery show selectable

【解决方案1】：

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

试试这个

 $(function() {
   $( "#selectable" ).selectable({
    stop: function() {
         var result = $( "#select-result" );
         result.html($(this).html());  // result.text($(this).text());
    }
  });
});

【讨论】：

【解决方案2】：

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

这会获取我们传递的元素的索引。我们不需要这条线。

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

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

我们可以把上面几行改成一件简单的事情。

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

编辑：见上图，this 可能指的是整个 ul，所以我们需要通过选中的 item 来过滤它。如果您允许多选，请参见下文。

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

【讨论】：

它似乎认为它选择了一切？并显示带有项目符号的列表？我做错了吗？
@user1871802 现在试一试。可能是小疏忽。
嘿，谢谢你的帮助 :) 一定是我，我得到了这个结果：i.imgur.com/TGq36sL.png 只是一个点？