multiselect.js のダウンロードページ ( 以下では cdnjs より利用しています )
設置が簡単な multiselect.js ですが、( select 要素を選択するだけで標準的なリストを左右二つ作成してくれます )実際使うとなると、横幅や高さやパディングの調整は必要です。
さらに、デフォルトでは選択するリストが左側と決まっていますが、これは float で作成されているので、左右を入れ替えるだけで右側を選択できるようにできます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" />
<script type="text/javascript">
$(function(){
$('#select_item').multiSelect({
keepOrder: true,
selectableHeader: "<div class='header_item'>商品候補</div>",
selectionHeader: "<div class='header_item'>対象商品</div>",
afterSelect: function(values){
console.log( values[0] )
console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
},
afterDeselect: function(values){
console.log( values[0] )
console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
}
})
});
</script>
<style>
.header_item {
padding: 5px;
text-align: center;
border: solid 1px #ccc;
margin-bottom:2px;
background-color: #eee;
}
.ms-container {
width: 600px;
}
.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection {
padding: 10px;;
}
.ms-container ul.ms-list{
height: 300px;
}
/*
以下は、左右入れ替える為の CSS
以下を設定しなければ、デフォルト仕様として左が選択可能になります
*/
.ms-container .ms-selectable {
float: right;
}
.ms-container .ms-selection {
float: left;
}
</style>
<form
method="get"
id="target_form"
target="my_ferame"
action="https://winofsql.jp/php_get.php"
accept-charset="utf-8">
<input
type="submit"
name="send"
id="send_check"
value="送信">
<select
multiple
id="select_item"
name="select_item[]">
<option value='0001'>りんご</option>
<option value='0002'>トマト</option>
<option value='0003'>いくら</option>
<option value='0004'>醤油</option>
<option value='0005'>鳥唐揚</option>
<option value='0006'>みりん</option>
<option value='0007'>さんま</option>
<option value='0008'>海苔</option>
<option value='0009'>おにぎり</option>
<option value='0010'>コロッケ</option>
</select>
</form>
<br>
<iframe
name="my_ferame"
frameborder="1"
scrolling="yes"
width="600"
height="200"></iframe>
キーも割り当てられていて、左右の矢印キーでリスト間移動ができ、上下矢印キーでリスト内を移動できます。 選択はスペースキーです。 イベント内(afterSelect と afterDeselect)では、values が引数となっていますが、上のソースでは、jQuery の セレクタで再度 SELECT 要素内の選択された OPTION のテキストも取得しています。values は配列で定義されているので、values[0] として値を取得していますが、文字列と連結する場合はオリジナルサンプルでも直接使っていました真ん中の矢印は画像なので、自作のものと置き換え可能です。 cssClass オプションの使い方 このオプションは、個別にクラスを実際定義するのでは無くコンテナにクラスを追加して個別にスタイル設定を可能にできるという意味があります。デフォルトでは、スタイルは全て ms-container というクラス名を先頭にしてセレクタが作成されているので、コンテナにクラスを追加すると、以下のような設定で cssClass に設定したクラス名を使用して個別に見栄えを変更できます。 このページでは、ms-container でクラス設定するように記述しているので、全ての multiSelect コンテンツが対象になりますが、デモ先では cssClass オプションを設定した multiSelect コンテンツ のみが設定されるようにしています。▼ cssClass に select_item を設定
<style>
.select_item {
width: 600px;
}
.select_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
padding: 10px;;
}
.select_item ul.ms-list{
height: 300px;
}
/* 左右入れ替え */
.select_item .ms-selectable {
float: right;
}
.select_item .ms-selection {
float: left;
}
</style>
refresh メソッドの使い方 オリジナルページの説明には無い、refresh メソッドの意味なのですが、ソースコードを読んでみると最初に設定したオプションの状態でコンテンツを再構築していました。但し、SELECT 要素の現在の状態で再構築するので、見た目は変化ありません。 本来、最初に設定したオプションを変更してから実行すべきメソッドなのですが、オプション内容を変更する為のメソッドが用意されていません。ですが、内部で保持されているオプションの参照として、jQuery の data() メソッドで参照できる内容を使用できました。 これを使用すると、後から動的にスタイル設定やその他の設定を変更する事ができます。デモ先では、見栄えのスタイル設定を交互に変更しています( ソースもページ下部にあります )
// ************************
// CSS の切り替え
// ************************
$('#change_css').click(function(){
var item1 = $("#select_item").data().multiselect.options.cssClass;
if ( item1 == "target_item" ) {
$("#select_item").data().multiselect.options.cssClass = "";
$("#select_item2").data().multiselect.options.cssClass = "target_item";
}
else {
$("#select_item").data().multiselect.options.cssClass = "target_item";
$("#select_item2").data().multiselect.options.cssClass = "";
}
$('#select_item').multiSelect("refresh");
$('#select_item2').multiSelect("refresh");
});
ライセンスについて WTFPL は、とても下品なライセンスですが、とても自由に使えるライセンスなのであまり気にしないでいいと思います。
|
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
