[jQuery UI] 選択を実装する（Selectable）

投稿日：2018年5月26日

jQueryUIでリストから選択するサンプルです。

サンプルソース

例）jQuery UIでリストから選択するサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQueryUI選択サンプル</title>
<style>
#lst01{width:200px; list-style-type:none;}
#lst01 li{border:1px solid #808080; color:#ffffff;}
.ui-selectee{background-color:#0000ff;}  /* 未選択のスタイル */
.ui-selected{background-color:#ff0000;}  /* 選択済みのスタイル */
.ui-selecting{background-color:#ffff00;}  /* 選択途中のスタイル */
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
$(function(){
  var arr;
  $('#lst01').selectable({
    start: function(){  //選択開始時
      arr = new Array();
    },
    selected: function(a, b){  //選択時
      arr.push($(b.selected).text());
    },
    stop: function(){  //選択終了時
      var str = arr.join(',');
      $('#disp').text("選択データ⇒" + str);
    }
  });
});
</script>
</head>
<body>
  <ul id="lst01">
    <li>札幌</li>
    <li>仙台</li>
    <li>東京</li>
    <li>名古屋</li>
    <li>大阪</li>
    <li>広島</li>
    <li>福岡</li>
  </ul>
  <p id="disp"></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryUI選択サンプル</title>

<style>

#lst01{width:200px; list-style-type:none;}

#lst01 li{border:1px solid #808080; color:#ffffff;}

.ui-selectee{background-color:#0000ff;} /* 未選択のスタイル */

.ui-selected{background-color:#ff0000;} /* 選択済みのスタイル */

.ui-selecting{background-color:#ffff00;} /* 選択途中のスタイル */

</style>

$(function(){

var arr;

$('#lst01').selectable({

start: function(){ //選択開始時

arr = new Array();

selected: function(a, b){ //選択時

arr.push($(b.selected).text());

stop: function(){ //選択終了時

var str = arr.join(',');

$('#disp').text("選択データ⇒" + str);

}

});

</script>

</head>

<body>

</ul>

</body>

</html>

実行サンプル

↓クリックまたは範囲選択で選択できます。

札幌
仙台
東京
名古屋
大阪
広島
福岡

解説

jQueryUI（Selectable）公式ページ ⇒ https://jqueryui.com/selectable/

執筆者：とら