如何从可选JQuery中获取多个值

Question

我正在尝试使用Selectable Jquery获取选定的值，这是我的代码，我正在关注此documentation

$(function() {
  $("#selectable").selectable({
    stop: function() {
      $(".ui-selected", this).each(function() {
        var index = $("#selectable li").attr('id');
        console.log('index', index)
      });
    }
  });
});

#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;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>


<ol id="selectable">
  <li class="ui-widget-content" id="2">Item 1</li>
  <li class="ui-widget-content" id="3">Item 2</li>
  <li class="ui-widget-content" id="4">Item 3</li>
</ol>

不幸的是，如果我选择多个li的值，例如索引1，索引2，我需要将结果作为索引[1,2]，如何实现这一点

Answer 1

$(function() {
  $("#selectable").selectable({
    stop: function() {
      $(".ui-selected", this).each(function() {
        var index = $(this).attr('id'); //this use
        console.log('index', index)
      });
    }
  });
});

#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;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>


<ol id="selectable">
  <li class="ui-widget-content" id="2">Item 1</li>
  <li class="ui-widget-content" id="3">Item 2</li>
  <li class="ui-widget-content" id="4">Item 3</li>
</ol>

Answer 2

$(function() {
  $("#selectable").selectable({
    stop: function() {
      console.log( $(".ui-selected", this).map(function() {
        return this.id;
      }).get() );
    }
  });
});

#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;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>


<ol id="selectable">
  <li class="ui-widget-content" id="2">Item 1</li>
  <li class="ui-widget-content" id="3">Item 2</li>
  <li class="ui-widget-content" id="4">Item 3</li>
</ol>