Chosen 選択すると、ボタンが追加されて複数選択を右手のマウスだけで行う事ができます。 必要なファイルは、js と css と chosen-sprite.png の3つのファイルだけです。
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadChosen'] !== true ) {
window[window.location.hostname+'.loadChosen'] = true;
document.write("<"+"link rel=\"stylesheet\" href=\"https://winofsql.jp/jquery/plugins/chosen/chosen.css\">");
document.write("<"+"script src=\"https://winofsql.jp/jquery/plugins/chosen/chosen.jquery.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
$(function() {
// セレクタ
$(".chosen")
// プラグイン
.chosen({
width: "550px",
max_selected_options: 3
})
// 変更時のイベント
.change(function(evt, params){
console.log(evt.type);
if ( params.selected ) {
console.log(params.selected+" が選択されました");
}
if ( params.deselected ) {
console.log(params.deselected+" が選択解除されました");
}
})
// リストが開いた時のイベント
.on('chosen:showing_dropdown', function(evt, params) {
console.log(evt.type);
console.log(params);
})
// リストが閉じた時のイベント
.on('chosen:hiding_dropdown', function(evt, params) {
console.log(evt.type);
console.log(params);
})
// 最大値以上を選択した時に発生するイベント( リストは開かない )
.on('chosen:maxselected', function(evt, params) {
console.log("---------------");
})
;
}
);
</script>
<form>
<input type="submit" value="送信"><br>
<select name="sel_01[]" data-placeholder="あなたの好きな色を選択して下さい" multiple class="chosen">
<option value="0"></option>
<option value="1">赤</option>
<option value="2">緑</option>
<option value="3">青</option>
<option value="4">紫</option>
<option value="5">ピンク</option>
<option value="6">オレンジ</option>
<option value="7">黄色</option>
<option value="8">茶色</option>
</select>
<br><br>
<select name="sel_02" data-placeholder="あなたの好きな色を選択して下さい"class="chosen">
<option value="0"></option>
<option value="1">赤</option>
<option value="2">緑</option>
<option value="3">青</option>
<option value="4">紫</option>
<option value="5">ピンク</option>
<option value="6">オレンジ</option>
<option value="7">黄色</option>
<option value="8">茶色</option>
</select>
</form>
|
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
