简体   繁体   English

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

[英]How to get multiple values from Selectable JQuery

I am trying to get selected values using Selectable Jquery, here is my code, I am following this documentation我正在尝试使用 Selectable Jquery 获取选定的值,这是我的代码,我正在关注此文档

 $(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>

Unfortunately, if I select multiple li's get values like index 1, index 2, I need the result as an index [1,2], how to achieve this不幸的是,如果我 select 多个 li 获取索引 1、索引 2 之类的值,我需要将结果作为索引 [1,2],如何实现

 $(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>

Try this:尝试这个:

$(".ui-selected", this).map(function() {
   return +this.id;
}).get(); // return int array

 $(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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM