selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js)

セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。

View the demo

トピックス

特徴
ダウンロード
導入方法
- スタイル
拡張
カスタマイズ
- 独自のselectボックスに適用させる
- id、classの引継ぎ
日付で使う
Callback関数を使う
動的にselect要素のDOMを書き換える場合（rebuildメソッド）
サンプル
更新履歴・追記
動作環境

特徴

selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。

セレクトボックスの鬱陶しいプルダウンを視覚的にわかりやすく表示。
セレクトボックス、プルダウンのデザインもスタイリッシュに。
単純にセレクトボックスのデザインを変えるためだけにも使えます。
(CSSを使ってセレクトボックスをシンプルで操作しやすいプルダウンに。)
読み込むCSSを変えるだけで簡単にデザインを変更できる。

ダウンロード

jQselectableはjQueryが必要になります。

jQselectableのダウンロード: jQselectable.zip

導入方法

CSSとスクリプトファイルを以下のように読み込み、(以下はselectableスタイル(?)を適用)


<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.1");</script>
<script type="text/javascript" src="js/jQselectable.js"></script>

下記のようなselect要素を用意します。(id(とname)は必須)


<select id="pref" name="pref">
<optgroup label="北海道">
<option value="01">北海道</option>
</optgroup>
<optgroup label="東北">
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="08">東京都</option>
<option value="09">茨城県</option>
<option value="10">栃木県</option>
<option value="11">群馬県</option>
<option value="12">埼玉県</option>
<option value="13">千葉県</option>
<option value="14">神奈川県</option>
</optgroup>
<optgroup label="北陸">
<option value="15">富山県</option>
<option value="16">石川県</option>
<option value="17">福井県</option>
</optgroup>
<optgroup label="甲信越">
<option value="18">新潟県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
</optgroup>
<optgroup label="東海">
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
</optgroup>
<optgroup label="関西">
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中四国">
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
</optgroup>
<optgroup label="沖縄">
<option value="47">沖縄県</option>
</optgroup>
</select>

option要素にはselected属性を使うことができます。
最後にHTMLヘッド要素の最後か任意のJSファイルで以下のように実行します。（jQuery UI selectableを利用している場合は後者のメソッドで呼び出しができません。）


jQuery(function($){
  $("select").jQselectable();
});
// または
jQuery(function($){
  $("select").selectable();
});

対象にするselect要素は


$("対象にするselect要素").jQselectable();

で決定します。
select要素全てに適用する場合は


$("select").jQselectable();

classに”selectable”を含むselect要素全てに適用する場合は


$(".selectable").jQselectable();

id=”selectable”に適用する場合は


$("#selectable").jQselectable();

となります。
この辺りの指定方法はjQueryのリファレンスをご覧ください。

スタイル

読み込むスタイルを変えることでセレクトボックスのデザインを簡単に変えることができます。
IE以外はサンプルのスタイル入れ替えボタンで確認できます。

現在は

selectable
natural

の2つから選択できます。これは増える予定でしたが、結局ふえてませんね。


<link type="text/css" rel="stylesheet" href="/skin/natural/style.css" />

スキンの構成ファイルについては、すごく簡単なんですけど後日追記していきます。

拡張

プルダウンの表示形式・表示非表示の際のエフェクト・表示速度・不透明度・プルダウン位置の微調整・プルダウンの高さ
などの拡張があります。

表示形式

プルダウンの表示形式を selectable、simpleBox から選択できます。
サンプルの2～5がselectable、6,7がsimpleBoxです。
デフォルトは selectable になっているので selectable を使う場合は指定する必要はありません。


$("select").jQselectable({
  style: "simpleBox"
});

selectable

selectableが指定された状態(デフォルト)では
select要素にoptgroup要素が含まれているかいないかでプルダウンの表示方法が若干変わります。

optgroup要素がある場合 -
表示されるプルダウンではdl要素として生成され
optgroup要素がdt、option要素がddの中にa要素としてインラインで配置されます。

optgroup要素なしの場合 -
プルダウンに表示される項目(option要素)全てがa要素としてインラインで配置されます。
なので項目が多い場合、1列に並んでしまい見難くなりますが
option要素にclass=”br”を入れることでその対象要素の後ろで改行させることができます。
これのサンプルは 4) を参考にしてください。これが一番使い勝手がいいかも。

ちなみに selectable が指定されている状態では
optgroup要素が含まれていてもoption要素にclass=”br”の指定ができます。
group内の要素が多い場合は、class=”br”で改行することで見易さが改善されます。

simpleBox

simpleBoxが指定されたselect要素は
selectable とは違い、デザイン可能なプルダウンに拡張します。(スクロールバーは環境依存です。)

simpleBoxが指定されたselect要素はoptgroup要素、class=”br”を含むことはできません。

simpleBoxで指定するselectボックスは併せてプルダウンの高さもご覧ください。

エフェクト

プルダウンを表示する際にフェードイン、スライドダウンをエフェクトとして使用することができます。
デフォルトはエフェクトなしになります。

下記の指定で、スライドダウン表示になります。


$("select").jQselectable({
  set: "slideDown"
});

フェードインにするときは set: “fadeIn”にします。

また同じようにして
プルダウンを非表示にする際もスライドアップ、フェードアウトのエフェクトを使用することができ
こちらはoutプロパティを使います。


$("select").jQselectable({
  out: "slideUp"
});

フェードアウトするときは out: “fadeOut” とします。

また表示、非表示時にする際のエフェクトはプルダウンが表示されるまでの速度(Duration)を決めることができ
下記のように


$("select").jQselectable({
  inDuration: "fast",
  outDuration: "fast"
});

表示時の速度は setDuration、非表示時の速度は outDuration でそれぞれ指定します。
取ることができる値は、”slow”、”normal”、”fast”、ミリセコンド指定(1～)で
デフォルトは”normal”になっています。

例えば、クラスにdateを持つselect要素の表示にスライドダウン、非表示にフェードアウト
それぞれの速度をfastとしたいときは以下のようになります。


$(".date").jQselectable({
  set: "slideDown",
  out: "fadeOut",
  inDuration: "fast",
  outDuration: "fast"
});

透明度

プルダウンが表示されたときの透明度を決めることができ


$("select").jQselectable({
  opacity: .9
});

のように opacity: 値で指定します。
CSSプロパティと同じものになるので 0～1の間で指定できます。

プルダウン位置の調整(少し高度な調整)

プルダウンの位置は画面におけるselect要素の位置と
input要素の置換した際のinput要素の高さから決定しています。

標準ではinput要素の高さはheightプロパティで指定しているので問題ありませんが
selectボックスを(実際はinput要素にあたりますが)独自のデザインにした場合などに
input要素の上下paddingを使った場合、プルダウンの位置がずれて最悪重なる場合があります。

これを回避するには以下のように posプロパティを使って微調整を行います。


$("select").jQselectable({
  pos: 20
});

posプロパティには数値(px)を指定でき、対象select要素のpadding値(上下の合計)を入れるのが一般的でしょう。

プルダウンの高さ

simpleBoxを指定したselectボックスにはCSSプロパティのmin-heightで高さを決めますが
IE6が対応していないのでjQselectableプロパティのheightを使います。


$("select").jQselectable({
  style: "simpleBox",
  height: 150
});

上記のようにheightには数値(px)を使うことができます。
例えばheight: 150にしておけば、プルダウンの高さが150pxを超えるときに
150pxで固定されスクロールバーが表示されます。

カスタマイズ

サンプルで使っている都道府県、日付以外のselectボックスに適用する場合の説明になります。

独自のselectボックスに適用させる

jQselectableは指定したselect要素をa+span要素とdiv要素等に置き換えています。
具体的に以下にようなselect要素に適用した場合は(例はselectable・optgroupありの場合)


<select id="pref" name="pref" class="selectable">
<optgroup label="北海道">
<option value="01">北海道</option>
</optgroup>
<optgroup label="東北">
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="08">東京都</option>
<option value="09">茨城県</option>
<option value="10">栃木県</option>
<option value="11">群馬県</option>
<option value="12">埼玉県</option>
<option value="13">千葉県</option>
<option value="14">神奈川県</option>
</optgroup>
<optgroup label="北陸">
<option value="15">富山県</option>
<option value="16">石川県</option>
<option value="17">福井県</option>
</optgroup>
<optgroup label="甲信越">
<option value="18">新潟県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
</optgroup>
<optgroup label="東海">
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
</optgroup>
<optgroup label="関西">
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中四国">
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
</optgroup>
<optgroup label="沖縄">
<option value="47">沖縄県</option>
</optgroup>
</select>


<select id="pref" name="pref">~~~</select>
<a id="pref_dammy" href="#" class="sctble_display sctble selectable"><span>大阪府</span></a>


<div id="pref_mat" class="sctble_mat sctble selectable optg" style="position: absolute; z-index: 1000; display: none;">
<dl class="first-child last-child">
<dt class="first-child">北海道</dt>
<dd><a href="#%E5%8C%97%E6%B5%B7%E9%81%93" name="01" class="selected first-child last-child">北海道</a></dd>
<dt>東北</dt>
<dd><a href="#%E9%9D%92%E6%A3%AE%E7%9C%8C" name="02" class="first-child">青森県</a><a href="#%E5%B2%A9%E6%89%8B%E7%9C%8C" name="03">岩手県</a><a href="#%E5%AE%AE%E5%9F%8E%E7%9C%8C" name="04">宮城県</a><a href="#%E7%A7%8B%E7%94%B0%E7%9C%8C" name="05">秋田県</a><a href="#%E5%B1%B1%E5%BD%A2%E7%9C%8C" name="06">山形県</a><a href="#%E7%A6%8F%E5%B3%B6%E7%9C%8C" name="07" class="last-child">福島県</a></dd>
<dt>関東</dt>
<dd><a href="#%E6%9D%B1%E4%BA%AC%E9%83%BD" name="08" class="first-child">東京都</a><a href="#%E8%8C%A8%E5%9F%8E%E7%9C%8C" name="09">茨城県</a><a href="#%E6%A0%83%E6%9C%A8%E7%9C%8C" name="10">栃木県</a><a href="#%E7%BE%A4%E9%A6%AC%E7%9C%8C" name="11">群馬県</a><a href="#%E5%9F%BC%E7%8E%89%E7%9C%8C" name="12">埼玉県</a><a href="#%E5%8D%83%E8%91%89%E7%9C%8C" name="13">千葉県</a><a href="#%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C" name="14" class="last-child">神奈川県</a></dd>
<dt>北陸</dt>
<dd><a href="#%E5%AF%8C%E5%B1%B1%E7%9C%8C" name="15" class="first-child">富山県</a><a href="#%E7%9F%B3%E5%B7%9D%E7%9C%8C" name="16">石川県</a><a href="#%E7%A6%8F%E4%BA%95%E7%9C%8C" name="17" class="last-child">福井県</a></dd>
<dt>甲信越</dt>
<dd><a href="#%E6%96%B0%E6%BD%9F%E7%9C%8C" name="18" class="first-child">新潟県</a><a href="#%E5%B1%B1%E6%A2%A8%E7%9C%8C" name="19">山梨県</a><a href="#%E9%95%B7%E9%87%8E%E7%9C%8C" name="20" class="last-child">長野県</a></dd>
<dt>東海</dt>
<dd><a href="#%E5%B2%90%E9%98%9C%E7%9C%8C" name="21" class="first-child">岐阜県</a><a href="#%E9%9D%99%E5%B2%A1%E7%9C%8C" name="22">静岡県</a><a href="#%E6%84%9B%E7%9F%A5%E7%9C%8C" name="23">愛知県</a><a href="#%E4%B8%89%E9%87%8D%E7%9C%8C" name="24" class="last-child">三重県</a></dd>
<dt>関西</dt>
<dd><a href="#%E6%BB%8B%E8%B3%80%E7%9C%8C" name="25" class="first-child">滋賀県</a><a href="#%E4%BA%AC%E9%83%BD%E5%BA%9C" name="26">京都府</a><a href="#%E5%A4%A7%E9%98%AA%E5%BA%9C" name="27">大阪府</a><a href="#%E5%85%B5%E5%BA%AB%E7%9C%8C" name="28">兵庫県</a><a href="#%E5%A5%88%E8%89%AF%E7%9C%8C" name="29">奈良県</a><a href="#%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C" name="30" class="last-child">和歌山県</a></dd>
<dt>中四国</dt>
<dd><a href="#%E9%B3%A5%E5%8F%96%E7%9C%8C" name="31" class="first-child">鳥取県</a><a href="#%E5%B3%B6%E6%A0%B9%E7%9C%8C" name="32">島根県</a><a href="#%E5%B2%A1%E5%B1%B1%E7%9C%8C" name="33">岡山県</a><a href="#%E5%BA%83%E5%B3%B6%E7%9C%8C" name="34">広島県</a><a href="#%E5%B1%B1%E5%8F%A3%E7%9C%8C" name="35">山口県</a><a href="#%E5%BE%B3%E5%B3%B6%E7%9C%8C" name="36">徳島県</a><a href="#%E9%A6%99%E5%B7%9D%E7%9C%8C" name="37">香川県</a><a href="#%E6%84%9B%E5%AA%9B%E7%9C%8C" name="38">愛媛県</a><a href="#%E9%AB%98%E7%9F%A5%E7%9C%8C" name="39" class="last-child">高知県</a></dd>
<dt>九州</dt>
<dd><a href="#%E7%A6%8F%E5%B2%A1%E7%9C%8C" name="40" class="first-child">福岡県</a><a href="#%E4%BD%90%E8%B3%80%E7%9C%8C" name="41">佐賀県</a><a href="#%E9%95%B7%E5%B4%8E%E7%9C%8C" name="42">長崎県</a><a href="#%E7%86%8A%E6%9C%AC%E7%9C%8C" name="43">熊本県</a><a href="#%E5%A4%A7%E5%88%86%E7%9C%8C" name="44">大分県</a><a href="#%E5%AE%AE%E5%B4%8E%E7%9C%8C" name="45">宮崎県</a><a href="#%E9%B9%BF%E5%85%90%E5%B3%B6%E7%9C%8C" name="46" class="last-child">鹿児島県</a></dd>
<dt>沖縄</dt>
<dd class="last-child"><a href="#%E6%B2%96%E7%B8%84%E7%9C%8C" name="47" class="first-child last-child">沖縄県</a></dd>
</dl>
</div>

といった具合に変換されますが
変換後のa要素は変換前のselect要素自体の幅は引き継ぎません。
なのでCSSを使って幅を決めます。

id、classの引継ぎ

変換後のa要素はのidにはselect要素のid+”_dammy”
classは sctble_display、sctble(sBox)とselect要素のclassが入ります。

個別に調整する場合は、id+”_dammy”で指定
ある程度まとめて調整する場合はclassを使います。


a.sctble_display {
  display: inline-block;
  *display: inline;
  zoom: 1;
  color: #262626;
  text-decoration: none;
  cursor: default;
}

a.sctble_display span {
  display: block;
  width: 5em;
  cursor: default;
}

のようにデフォルトのinput要素の幅は7emを指定しているので
ここを継承値が同じか高いもので上書きすることで幅を変えることができます。

これを使って日付の幅を変えています。

同様にプルダウン部分もid、classを引き継ぎます。
生成されたプルダウンのidにはselect要素のid+”_mat”
classは sctble_mat、sctble(sBox)とselect要素のclassが入ります。

simpleBox プルダウン部分の幅は


div.sBox {
  border: solid #DFDFDF 1px;
  border-left: none;
  width: 130px;
  overflow: auto;
  overflow-x: hidden;
  background: #FFF;
}

上記のようにdiv.sBoxで指定しているので
これを上書きすることでプルダウンの幅を変えることができます。

※高さはselectableプロパティで指定します。

日付で使う

日付で使う場合は、サンプルのように
selectable の場合はクラスに年 : m_year、月 : m_month、日 : m_day を入れます。
同様にsimpleBox の場合はクラスに年 : s_year、月 : s_month、日 : s_day をそれぞれ入れます。

Callback関数を使う

プルダウンの項目を選択したときにCallback関数を使うことができます。
Callback関数を使う場合は、以下のようにします。


$("select").jQselectable({
  callback: function(){
    handler
  })
});

例えば、select.onchangeのようにプルダウンの項目を選択したときに
optionのvalue値のURIに遷移するfunctionを定義するには以下のようにします。サンプル8)を参照


$("#callback").jQselectable({
  style: "simpleBox",
  opacity: .9,
  callback: function(){
    if($(this).val().length>0) window.location = $(this).val();
  }
});

渡したjQueryオブジェクトを$(this)で受け取ることができます。

動的にselect要素のDOMを書き換える場合（rebuildメソッド）

jQselectableを実行した後に、JSやAJAXを使ってselect要素のDOMが動的に内容が書き換わっても、rebuildメソッドを実行することで jQselectableの内容を最新に更新することができます。

事例についてはjQselectable(jQuery.selectable.js) とAjaxZip2を併用するを確認してください。

rebuildメソッドを使う場合は、jQselectable実行時に返されるインスタンスを変数から参照できる状態にしておく必要があります。

Comments

var selectable = $(elm).jQselectable(); // 実行時にインスタンスを変数に保存
selectable.rebuild(); // 再構築

上記のような再構築が必要ない場合は、今まで通り

$(elm).jQselectable();

だけです。

更新履歴・追記

2010.02.11: jQselectableとして記事を修正しました。; rebuildメソッドの説明を追加しました。; callbackで$(this)で受け取れるようにしました。
2009.07.30: ソースコードを修正しました。(動作など変更はありません)
2009.01.21: アップデートしました。変更項目は、select置き換えをやめて表示部分はa+span要素に構成変更・選択時のフォーカス・デザインをスタイルで簡単に選択できるようにしました。
2008.09.16: プルダウンの高さ、Callback関数を使うを追加
2008.09.14: select要素のmultiple属性には対応していません。。。。

動作環境: Windows: IE6, IE7, Firefox3, Opera9.5, Safari3, Chromeで確認

Comments: 35

Amber November 23rd, 2008 03:30:39

Reply

Well said.
Cher December 5th, 2008 04:28:23

Reply

People should read this.
YU January 19th, 2009 11:50:51

Reply

こちらに質問していいのかわからなかったのですが、
どうしても使いたかったので、すみません。

最後で実行していますが、ajax非同期でoptionを表示している
せいなのかoption要素ゼロとみなされて表示できません。

どうにもならないのでしょうか。
よろしくお願いいたします。
nori January 19th, 2009 13:02:43

Reply

YUさん＞

Ajax通信はjQueryを使っていますか？

Ajax通信をjQueryを使わずに行っている場合は
Ajax通信自体の実行順序が $(function(){}); 後となり
$().selectable(); 実行時にはselect要素内が空または存在しないので
もしかするとそれが原因かもしれません。

どうしても解決しない場合は…
難しいとは思うんですけれどサンプルを見せてもらうことができれば
原因の確認が取れますのでもしよければメールで送ってもらえればと思います。

norimania[at]gmail.com
YU January 19th, 2009 17:41:26

Reply

お早いご回答ありがとうございます。

ajaxはｊQueryを使用しています。
非同期通信後のoptionでも実行できるとのことで
安心しました。
もう少し自分で頑張ってみます。

それでも解決できない時は、お言葉に甘えてメール
させて頂きます。
hm March 31st, 2009 16:41:15

Reply

はじめまして！
どう質問していいのかわからず、サイトのIDなどもありましたので
記載してあったメールあどれすへ質問させていただきました。

もう2日間も悩み続けて頭の中がかゆくなってきましたので
できましたらお助け下さい・・・・
so May 5th, 2009 15:47:10

Reply

一度、$(”#target”).selectable();として作成した要素を全てクリアして新しい要素で作り直したいのですが、そのようなことは可能でしょうか？
通常のセレクトボックスの場合はappendを使用すればできますが、selectableを使用したものの場合、appendしてもそれが反映されません。
以下のように、再度selectable()をすることによって反映されたものは作られますが、今度は元のボックスがそのまま残ってしまいます。
empty()を実行すれば消えるかとも思ったのですが・・・

$(”#target”).empty(); // この行を実行させても値はクリアされない
var elem = document.createElement(”option”);
elem.appendChild(document.createTextNode(”foo”));
elem.value = “bar”;
$(”#target”).append(elem);
$(”#target”).selectable();

何か方法がありましたらお教えください。よろしくお願いいたします。
nori May 6th, 2009 23:37:37

Reply

こんばんは。

元のSELECT要素とselectableで生成する要素は
連動していないので個別に削除する必要があります。

$(”#target”).selectable();というように$(”#target”)に適用した場合は
<div id=”target_mat”></div> と <a id=”target_dammy”></a> が生成されて
その中に$(”#target”)のOPTION要素分の項目が追加されます。

ので、再度適用する場合は

$(”#target”).empty();
$(”#target_mat,#target_dammy”).remove(); // ここでselectable要素を削除
var elem = document.createElement(”option”);
elem.appendChild(document.createTextNode(”foo”));
elem.value = “bar”;
$(”#target”).append(elem);
$(”#target”).selectable();

でうまくいくと思います。
so May 7th, 2009 11:50:58

Reply

早速のご返事ありがとうございました。
その方法でうまく動作しました。
どうもありがとうございました:)
takuya May 29th, 2009 11:35:58

Reply

plugin 便利に使わせてもらってます
もしかしたらスペルミスかなと思ったところがありまして、生成されるダミー要素のサフィックスが、模造を意味するなら正しくは dummy ですが、実際には dammy になっていました。
勘違いだったらすみません。念の為ご報告まで。
nori May 29th, 2009 12:21:15

Reply

takuyaさん＞

コメントありがとうございます。
ああ！これは恥ずかしすぎるミスを…
コメントがなければ永遠に気付かないままでした…

直しておきます＞＜
ああ July 20th, 2009 00:23:08

Reply

動作サンプルやダウンロードが出来ないのですが…

配布をやめたのでしょうか？
1. nori July 20th, 2009 01:49:56
  
  すみません、、サンプルデータの移行を忘れてました…
  移行したのでダウンロードできます。ご迷惑かけました＞＜
けんたろう September 26th, 2009 03:08:39

Reply

スキンのライセンスはどうなっていますか？
どうしても使いたいのですが・・・・。

宜しくお願いします。
1. nori January 3rd, 2010 14:22:55
  
  スキンもMITライセンスとしていますので
  ご自由に使っていただいて問題ないです
fukuda December 3rd, 2009 19:20:38

Reply

はじめまして。
サンプルをみながら勉強させていただいております。
解説を読んだものの、わからなくて困っております。

セレクトボックスのプルダウンに表示する文字列が長いと、
途中までしか表示されず、その下に続きが表示されてしまいます。

例）
ああああああ▼　
ああああ

プルダウンの長さを変更することはできないのでしょうか。
fukuda December 3rd, 2009 19:28:01

Reply

すいません！できました！！
失礼いたしました。。。
1. nori January 3rd, 2010 14:23:25
  
  お返事できずにすみません X(
  解決できたようでなによりです！
mick January 6th, 2010 11:12:41

Reply

便利すぎて、見た目がスタイリッシュ
もう100点満点なJSですね。
かなり活用させてもらっています。

ところで、郵便番号自動入力のJSが他サイトで配布されていますが
それと、このjquery.selectable.jsを一緒に使おうとがんばっているのですが
都道府県名がうまく入ってくれません。

なにか問題発生しているのでしょうか…
1. nori January 6th, 2010 13:54:45
  
  コメントありがとうございます
  
  郵便番号入力スクリプトでは入力後に
  元になっている都道府県プルダウンを動的に選択して
  値を変更していますが、selectableと併用している場合
  selectableからプルダウンの値変更は連動しているのですが
  元のプルダウンの値変更はselectableに連動していません。
  
  ブログ上で案内しておらず申し訳ないのですが
  実はselectableのバージョンアップ版のjQselectableというものがあります。
  http://jqselectable.googlecode.com/
  未だに解説記事がないのですが･･･こちらのjQselectableを使えば
  郵便番号補完スクリプトに1行追記する必要がありますが
  郵便番号からの補完時に、rebuild()というAPIを使うことで実現できると思います。
  
  ややこしくなってしまいました･･･
  norimania[at]gmail.com まで
  詳細をメールでいただければもう少しフォローさせてもらいます。
2. mick January 7th, 2010 09:25:35
  
  返信ありがとうございます。
  ご迷惑承知で、昨日メールを送らせていただいています。
  お手透きのときにでも確認してください。
  よろしくおねがいします。
3. nori January 10th, 2010 23:12:43
  
  記事にしましたので確認してみてください
  http://bit.ly/8XnVEo
wat February 3rd, 2010 19:40:17

Reply

これはヤバイですね！
感動しました。
使わせていただきます。
1. nori February 4th, 2010 22:54:26
  
  そんな･･･感動とかなんだか恐縮です。。
  
  結構前に書いたスクリプトですが
  徐々に認知されてきてるみたいでうれしいです
virotyana February 9th, 2010 18:26:46

Reply

静的なセレクトではうまく動くんですが動的に生成した場合はselectaableを使ってない時の表示になってしまいます。なにか手だてはあるでしょうか。
1. nori February 9th, 2010 19:38:12
  
  動的に生成する場合は、生成後に$(生成したselect).selectable()でうまくいきませんか？
virotyana February 9th, 2010 22:29:58

Reply

現状はchainedselectというので階層化してまして、上の階層で要素を選択した時点で下の階層にselectの内容が生成されるんですが、その後にselectable()を働かせるにはどうやったらいいのでしょうか？今はhtmlに埋め込んだりjavascriptのそれらしい所に設定したりしてるんですけどうまく働いていませんね。
1. nori February 10th, 2010 00:41:20
  
  select要素ごと生成するんですか？option要素を入れ替える形ですか？
virotyana February 10th, 2010 06:33:39

Reply

おつきあいありがとうございます。
optgroupとoptionを入れ替える形です。
1. nori February 10th, 2010 10:23:40
  
  http://bit.ly/8XnVEo
  この記事のように、入れ替え後にrebuildしても無理でしょうか？
  （jQselectableを使ってください）
virotyana February 10th, 2010 23:40:31

Reply

出来ましたというか出来ていました。jQselectable()のせいではなくてoptionがちゃんとoptgroupのchildnodeになってないのが原因でした。どうもお騒がせしました。
1. nori February 11th, 2010 01:27:15
  
  できたようでよかったです
tora February 22nd, 2010 14:54:27

Reply

コールバック関数ですが、新しいバージョンだと以下のようにしないと動かないですね。
$(”select”).jQselectable({},function(){Callback});
↓
$(”select”).jQselectable({
callback: function(){Callback}
});
1. nori February 22nd, 2010 18:53:23
  
  ありがとうございます！完全に忘れてました＞＜
kagi March 18th, 2010 13:37:34

Reply

はじめまして。
サンプルのSimplebox　6) Prefectures without optgroup, simpleBoxについてなのですが、IE8でpulldownした場合、hoverが効かないようなのですが、何か対処方法はあるのでしょうか？

Trackbacks: 7

Trackback URL for this entry
Listed below are links to weblogs that reference: selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) from 5509(+1)

pingback from プルダウンで都道府県などを入力(選択)するイライラを解消するPrefSupport.js « moto-mono September 14th, 2008

[...] ※) prefSupport内のoptgroupの使い方は間違っています。すいません。修正版はjQuery.selectable.jsとして書き直しました。jQuery.selectable.jsをごらんください。 [...]
pingback from プルダウンで日付を入力(選択)するイライラを解消するDateSupport.js « moto-mono September 14th, 2008

[...] ※) 最新版をprefSupport.jsとあわせてjQuery.selectable.jsにまとめました。 jQuery.selectable.jsをごらんください。 [...]
trackback from moto-mono September 14th, 2008

jQuery.selectable.jsご利用時の注意です

僕の注意・説明不足ですいません。
jQuery.selectable.js のサンプルファイルのソースコード中の下記部分
(10.29以前のサンプルファイル index.html

<!– ▼これはjQuery.selectable.jsとは…
pingback from [未完成] スライダーから時間を選択する | 5509 September 14th, 2008

[...] select要素からスライダ作成してイベント繋げてっていうselectableみたいなやつです。 UI Sliderの使い方は一通り理解できたのでこれはこれでよかったかなぁ。 [...]
pingback from jQuery.selectable.jsのアップデート | 5509 September 14th, 2008

[...] jQuery.selectable.jsの記事にも追記してます。 [...]
trackback from ウェブユーザビリティ.JP September 14th, 2008

セレクトボックスを分かりやすいパネル表示に拡張:selectable.js

都道府県の選択や、もっと複雑なところでは海外サイトの国名選択など、セレクトボックスから目的のものを探す際になかなか見つからずにイライラしてしまった経験はありませんか？
…
pingback from プルダウンをより使いやすくするUI « エンジニアのためのUI改善講座 September 14th, 2008

[...] 導入ガイドはこちら [...]

selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js)

トピックス

特徴

ダウンロード

導入方法

スタイル

拡張

表示形式

selectable

simpleBox

エフェクト

透明度

プルダウン位置の調整(少し高度な調整)

プルダウンの高さ

カスタマイズ

独自のselectボックスに適用させる

id、classの引継ぎ

日付で使う

Callback関数を使う

動的にselect要素のDOMを書き換える場合（rebuildメソッド）

更新履歴・追記

Comments: 35

Leave a comment

Trackbacks: 7

Author

トピックス

特徴

ダウンロード

導入方法

スタイル

拡張

表示形式

selectable

simpleBox

エフェクト

透明度

プルダウン位置の調整(少し高度な調整)

プルダウンの高さ

カスタマイズ

独自のselectボックスに適用させる

id、classの引継ぎ

日付で使う

Callback関数を使う

動的にselect要素のDOMを書き換える場合（rebuildメソッド）

更新履歴・追記

Related Entries

Comments: 35

Leave a comment

Trackbacks: 7

Author