Как получить несколько значений из Selectable JQuery - PullRequest
Новая
       33

Как получить несколько значений из Selectable JQuery

0 голосов
/ 03 мая 2020

Я пытаюсь получить выбранные значения с помощью 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>

К сожалению, если я выбираю несколько значений li, таких как индекс 1, индекс 2, мне нужен результат как индекс [1,2], как этого добиться

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Попробуйте это: 

$(".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>
1 голос
/ 03 мая 2020 

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