https://github.com/dellsala/Combo-Box-jQuery-Plugin オリジナルの実装では、作成する毎に、jQuery の 名前空間に作った配列に追加していたので、インスタンスに対する処理が対象となるエレメントからの参照では無く不自然だったので、本来の jQuery の使い方に近い実装に変更しました。後、CSS の指定で一つバグがあったので修正しています。 オリジナルでのオプション変更
$('#option_changer').click(function (e) {
jQuery.combobox.instances[0].setSelectOptions([
'Apples',
'Oranges',
'Bananas'
]);
});
$('#option_changer').click(function (e) {
$("#input1").comboget().setSelectOptions([
'Apples',
'Oranges',
'Bananas'
]);
});
http://lightbox.in.coocan.jp/jquery/combobox/css/jquery.combobox/style.css http://lightbox.in.coocan.jp/jquery/combobox/js/jquery.combobox.js
ソースコードを見ると、他にもメソッドがあるのですが、使いどころがあまりありません。あと、キー操作があって、フォーカスがある時に下矢印でリストが開きます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://lightbox.in.coocan.jp/jquery/combobox/css/jquery.combobox/style.css">
<script type="text/javascript" src="http://lightbox.in.coocan.jp/jquery/combobox/js/jquery.combobox.js"></script>
<script type="text/javascript">
$(function () {
$('#input1').combobox([
'青森',
'岩手',
'秋田',
'山形',
'宮城',
'福島',
'栃木',
'群馬',
'茨城',
'東京'
]);
jQuery('#input2').combobox([
'切絵字1.0',
'モフ字1.3',
'水面字1.1',
'三次元切絵字1.0',
'白舟篆書(教育漢字1006字)',
]);
jQuery('#option_changer1').click(function () {
$("#input1").comboget().setSelectOptions([
'三重','和歌山','奈良','滋賀','京都','大阪'
]);
});
jQuery('#option_changer2').click(function () {
$("#input2").comboget().setSelectOptions([
'怨霊フォント',
'下町の恐怖フォント',
'しねきゃぷしょん',
'たぬき油性マジック',
'やさしさゴシックボールド'
]);
});
jQuery('#test_show').click(function () {
setTimeout( function() {$("#input1").comboget().selector.show();}, 1000 );
});
jQuery('#test_select').click(function () {
setTimeout( function() {
$("#input1").comboget().selector.show();
$("#input1").comboget().selector.select(2);
}, 1000 );
});
jQuery('#test_get').click(function () {
$("#input1").comboget().selector.select(2);
alert( $("#input1").comboget().selector.getSelectedValue() );
});
});
</script>
<div style='width:400px;height:150px'>
<table><tr>
<td><textarea id="input1"></textarea></td>
<td><input id="input2" type="text" value="アームド・バナナ" style='width:100px;'></td>
</tr></table>
<input id="option_changer1" type="button" value="内容変更1" />
<input id="option_changer2" type="button" value="内容変更2" />
<input id="test_show" type="button" value="1秒後表示" />
<input id="test_select" type="button" value="1秒後表示して選択" />
<input id="test_get" type="button" value="3番目の文字列を取得" />
</div>
関連する記事 jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする
タグ：jquery javascript
|
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
