selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js)
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。
トピックス
特徴
selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。
- セレクトボックスの鬱陶しいプルダウンを視覚的にわかりやすく表示。
- セレクトボックス、プルダウンのデザインもスタイリッシュに。
- 単純にセレクトボックスのデザインを変えるためだけにも使えます。
(CSSを使ってセレクトボックスをシンプルで操作しやすいプルダウンに。) - 読み込むCSSを変えるだけで簡単にデザインを変更できる。
ダウンロード
jQselectableはjQueryが必要になります。
- jQselectableのダウンロード
- jQselectable.zip
導入方法
CSSとスクリプトファイルを以下のように読み込み、(以下はselectableスタイル(?)を適用)
下記のようなselect要素を用意します。(id(とname)は必須)
2011-04-21 追記：optionのdisabled属性をサポートしました。disabled属性を持つoptionはselectableへ展開したときに選択できません。
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つから選択できます。これは増える予定でしたが、結局ふえてませんね。
スキンの構成ファイルについては、すごく簡単なんですけど後日追記していきます。
拡張
プルダウンの表示形式・表示非表示の際のエフェクト・表示速度・不透明度・プルダウン位置の微調整・プルダウンの高さ
などの拡張があります。
表示形式
プルダウンの表示形式を 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ありの場合)
大阪府
といった具合に変換されますが
変換後の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 の場合は クラスに 年 : 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実行時に返されるインスタンスを変数から参照できる状態にしておく必要があります。
var selectable = $(elm).jQselectable(); // 実行時にインスタンスを変数に保存 selectable.rebuild(); // 再構築
上記のような再構築が必要ない場合は、今まで通り
$(elm).jQselectable();
だけです。
更新履歴・追記
- 2011.04.21
-
option要素のdisabled属性に対応
新しいテーマ「XPスタイル」を追加しました。 - 2011.01.16
- ソースコードをgithubへ移行
- 2010.12.02
- Windowの高さ半分より下にselectableが存在するときにはプルダウンをselectableの上に表示するように修正しました
- rebuildメソッドの説明を追加しました。
- 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で確認
何か役に立つことがあったらシェアしてみてください
Leave a comment
Trackbacks: 9
- Trackback URL for this entry
- Listed below are links to weblogs that reference
- selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) from 5509
-
pingback from プルダウンで都道府県などを入力(選択)するイライラを解消するPrefSupport.js « moto-mono [...] ※) prefSupport内のoptgroupの使い方は間違っています。すいません。 修正版はjQuery.selectable.jsとして書き直しました。jQuery.selectable.jsをごらんください。 [...]
-
pingback from プルダウンで日付を入力(選択)するイライラを解消するDateSupport.js « moto-mono [...] ※) 最新版をprefSupport.jsとあわせてjQuery.selectable.jsにまとめました。 jQuery.selectable.jsをごらんください。 [...]
-
trackback from moto-mono jQuery.selectable.jsご利用時の注意です
僕の注意・説明不足ですいません。
jQuery.selectable.js のサンプルファイルのソースコード中の下記部分
(10.29以前のサンプルファイル index.html -
pingback from [未完成] スライダーから時間を選択する | 5509 [...] select要素からスライダ作成して イベント繋げて っていうselectableみたいなやつです。 UI Sliderの使い方は一通り理解できたのでこれはこれでよかったかなぁ。 [...]
-
pingback from jQuery.selectable.jsのアップデート | 5509 [...] jQuery.selectable.jsの記事にも追記してます。 [...]
-
trackback from ウェブユーザビリティ.JP セレクトボックスを分かりやすいパネル表示に拡張:selectable.js
都道府県の選択や、もっと複雑なところでは海外サイトの国名選択など、セレクトボックスから目的のものを探す際になかなか見つからずにイライラしてしまった経験はありませんか？
… -
pingback from プルダウンをより使いやすくするUI « エンジニアのためのUI改善講座 [...] 導入ガイドはこちら [...]
-
pingback from セミナー「CSS Nite LP, Disk 9」に参加しました | 100ぱーせんと！ [...] 212;– ・jQueryを使う理由：javascriptより動作が速い、コードが短い ・javascriptOFF環境にも優しく 参考URL https://5509.me/2008/09/14/jqueryselectable.html http://gihyo.jp/design/serial/01/jquery-site-production/ [...]
-
pingback from 都道府県の住所入力リストをわかりやすくするスクリプト | ユーザビリティ・EFOマニア!! [...] 「jQselectable」 これは5509さんで公開されているJavascriptのJQueryライブラリで、住所入力が必要なフォームで都道府県セレクトボックスをとっても使いやすくしてくれます。 [...]
Comments: 62 - Leave a comment
こんにちは。
jqueryselectable、是非使わせていただきたく！ 奮闘しているのですが…
やりたいことは、リンクをクリックしたら指定したページにすぐに飛ぶ、
ということだけなのですが、中々うまくいきません。。。。
基本的なことだと承知しておりますが、ご教示頂けますとありがたいです。
とても良いので使わさせていただきます。
一点、以下のようにスペースを含むと改行が入ってしまいます。
なにか対策はありますでしょうか？
・・すみません、タグが外れてしまいました。
＜option value=”AAAA AAAAAAA”＞AAAA AAAAAAA＜/option＞
selectableのボックス（表示されているセレクトボックスの部分）
の幅を広げるかCSSのword-break/white-spaceか何かで対応すれば大丈夫だと思います。
jQselectableの利用規約はどこで読めますか？
利用規約はありませんのでMITライセンスで運用可能な範囲でよろしくお願いします
連投ですみません。具体的なことを書こうと再現させようとしたら、今度は再現できませんでした。
こちらで再現できないので何とも言えないのですが、ウィンドウをリサイズしていくと表示されなくなったりするのでしょうか？
IEで1366×768の縦が短いディスプレイで表示した場合に、SELECTBOXが表示されている位置によって、リストが表示されない場合があります。（FireFoxでは大丈夫でした）
ぜひとも使いたいのですが、これを回避する方法はございませんでしょうか？
便利に使わせてもらっています。
1つだけ聞きたいのですが、特定のボタンをクリックした際に
セレクトボックスの選択をクリアするのはどのように処理すればいいでしょうか？
removeAttrでselectedを削除してみたり
selectedIndex = 0 をしてみたりといろいろやりましたが
どうもうまく動きません。
よろしければご教授ください。
selectboxで選択された値をクリアというのは、そもそも出来ないので、jQselectableからも行うことはできません。
例えば
というselect要素があった場合、一番上の空のオプションを選択して、selectableの表示もそれに併せてリセットしたいということであれば、rebuild()メソッドを利用してください。
ドキュメントは以前書いたものがあるので、参考にしてみてください。
https://5509.me/log/jqselectable-with-using-ajaxzip2
はじめまして、この度jQselectableを使わせていただいているのですが、
jQselectableを使っているselect（下段）と使わないselect（上段）がサイト上にある場合、
jQselectableを使っているselectを選ぶ際に、使わないselectが前方に表示されてしまい、jQselectableのoptionが選ぶことが困難です。
z-indexなどで前方表示にしたいと考えているのですが、
方法はありますでしょうか？
きっとIEですよね。
IEはセレクトボックスにzIndexは使えないので、非表示にするとかにしないとだめですね。
プラグイン内に表示されているselectボックス全てを非表示にする、っていう機能を追加するのは微妙ですね・・・
とはいえ、selectableをクリックしたときに任意の関数は実行できないので、実行できるようなオプションを追加すれば対応できますか？？
素早い返信ありがとうございます。
そうですね、IEで今z-indexが使用できないことに悩んでいたところです。
オプション追加ということであればある程度は対応出来ると思います。
大変楽しみに待っています。
よろしくお願いします。
連投ですいません。
いろいろオプションなどで考えたのですが、クリックした際に開くdivでしょか？あの部分をドラッグ移動できたら面白いなと一人考えてました。
参考になればと思い、書きこんでしまいました。
わがままではありますが、よろしくお願いします。
すばらしいプラグインありがとうございます。
一点だけですが、IEでみますと一瞬だけデフォルトのselectのUIがみえて、すぐにスタイルが適応されるのですが、デフォルトのUIがみえないようにすることはできますでしょうか？
ありがとうございます
やってる一連の処理がそれなりに重くて、IEのJSエンジンだと処理とレンダリングに時間がかかってしまうんですね。。対象要素が増えるとどうしてもちらついてしまう感じです。
もしかするとCSSでvisibility: hiddenにしておくとうまくいくかもしれませんが・・・
はじめまして。
素晴らしいスクリプトを見させてもらい感動しました。
さっそく使ってみたのですが、
サンプルの jQselectable -> 2) 都道府県の選択で、
初期値として「都道府県を選択してください」という項目を追加することができないでしょうか？
（一覧画面に表示されないように）
教えてください。よろしくお願いします。
こんにちは。
僕も以前同じような実装をしたことがあるので、初期値を入れられるようなオプションを用意したいと思います。
数日お待ちください
ありがとうございます。
とっても素晴らしいスクリプトありがとうございました！！
承知いたしました。
ありがとうございます！
はじめまして。とても便利なSelectボックスをありがとうございます。
IE7/IE8で出現するズーム機能の縮小でセレクトボックスが大きくなるバグも解消されていてすばらしいです。
業務で使用させていただきたいのですが、スキンを一部カスタマイズさせていただいて使用しても問題ございませんでしょうか？
よろしくお願いいたします。
こんにちは。
どうぞどうぞ、スクリプトのライセンスさえ残していただければお好きなように使っていただいて問題ありません。
はじめまして。
とても便利なSELECT BOXありがとうございます。
質問させてください。
js初心者です。
SELECT BOXの右上に「×」にてcloseボタンをつけたいのですが、どこに何を書き込めばいいかわからないので教えてください。
宜しくお願いします。
こんにちは。
全てを書く時間がとれないので
簡単に
176行目あたりに
this.mat.append(‘×’);
を追加
304行目の
$(‘a’,this.mat).click
を
$(‘a’,this.mat).not(‘.selectableCloseLabel’).click
に修正して、CSSでアンカーの位置を調節すればできるような気がします。
試してないので、、出来なかったらごめんなさい。
こちらの機能はすばらしいですね。
活用させていただきます。
差し出がましいのですが
selectは通常クリックする度に
表示を切り替えているので
こちらもそういった動作になるようにしてみました。
272行目
mat_show();
こちらを
var idName = this.getAttribute(‘id’);
var matId = idName.substr(0, idName.length-5) + “mat”;
if ($(“#”+ matId).css(‘display’) == “none”) {
mat_show();
} else {
mat_hide();
}
としてみました。
もっとよい書き方もあるのかもしれませんが
ご参考までに。
コメントありがとうございます。
たしかにそうでした。
アップデートするときの参考にさせていただきますね
はじめまして。
サンプルのSimplebox 6) Prefectures without optgroup, simpleBoxについてなのですが、IE8でpulldownした場合、hoverが効かないようなのですが、何か対処方法はあるのでしょうか？
コールバック関数ですが、新しいバージョンだと以下のようにしないと動かないですね。
$(“select”).jQselectable({},function(){Callback});
↓
$(“select”).jQselectable({
callback: function(){Callback}
});
ありがとうございます！完全に忘れてました＞＜
出来ましたというか出来ていました。jQselectable()のせいではなくてoptionがちゃんとoptgroupのchildnodeになってないのが原因でした。どうもお騒がせしました。
できたようでよかったです
おつきあいありがとうございます。
optgroupとoptionを入れ替える形です。
http://bit.ly/8XnVEo
この記事のように、入れ替え後にrebuildしても無理でしょうか？
（を使ってください）
現状はchainedselectというので階層化してまして、上の階層で要素を選択した時点で下の階層にselectの内容が生成されるんですが、その後にselectable()を働かせるにはどうやったらいいのでしょうか？今はhtmlに埋め込んだりjavascriptのそれらしい所に設定したりしてるんですけどうまく働いていませんね。
select要素ごと生成するんですか？option要素を入れ替える形ですか？
静的なセレクトではうまく動くんですが動的に生成した場合はselectaableを使ってない時の表示になってしまいます。なにか手だてはあるでしょうか。
動的に生成する場合は、生成後に$(生成したselect).selectable()でうまくいきませんか？
これはヤバイですね！
感動しました。
使わせていただきます。
そんな･･･感動とかなんだか恐縮です。。
結構前に書いたスクリプトですが
徐々に認知されてきてるみたいでうれしいです
便利すぎて、見た目がスタイリッシュ
もう100点満点なJSですね。
かなり活用させてもらっています。
ところで、郵便番号自動入力のJSが他サイトで配布されていますが
それと、このjquery.selectable.jsを一緒に使おうとがんばっているのですが
都道府県名がうまく入ってくれません。
なにか問題発生しているのでしょうか…
コメントありがとうございます
郵便番号入力スクリプトでは入力後に
元になっている都道府県プルダウンを動的に選択して
値を変更していますが、selectableと併用している場合
selectableからプルダウンの値変更は連動しているのですが
元のプルダウンの値変更はselectableに連動していません。
ブログ上で案内しておらず申し訳ないのですが
実はselectableのバージョンアップ版のjQselectableというものがあります。
未だに解説記事がないのですが･･･こちらのjQselectableを使えば
郵便番号補完スクリプトに1行追記する必要がありますが
郵便番号からの補完時に、rebuild()というAPIを使うことで実現できると思います。
ややこしくなってしまいました･･･
norimania[at]gmail.com まで
詳細をメールでいただければもう少しフォローさせてもらいます。
返信ありがとうございます。
ご迷惑承知で、昨日メールを送らせていただいています。
お手透きのときにでも確認してください。
よろしくおねがいします。
記事にしましたので確認してみてください
http://bit.ly/8XnVEo
すいません！できました！！
失礼いたしました。。。
お返事できずにすみません X(
解決できたようでなによりです！
はじめまして。
サンプルをみながら勉強させていただいております。
解説を読んだものの、わからなくて困っております。
セレクトボックスのプルダウンに表示する文字列が長いと、
途中までしか表示されず、その下に続きが表示されてしまいます。
例）
ああああああ▼
ああああ
プルダウンの長さを変更することはできないのでしょうか。
スキンのライセンスはどうなっていますか？
どうしても使いたいのですが・・・・。
宜しくお願いします。
スキンもMITライセンスとしていますので
ご自由に使っていただいて問題ないです
動作サンプルやダウンロードが出来ないのですが…
配布をやめたのでしょうか？
すみません、、サンプルデータの移行を忘れてました…
移行したのでダウンロードできます。ご迷惑かけました＞＜
takuyaさん＞
コメントありがとうございます。
ああ！これは恥ずかしすぎるミスを…
コメントがなければ永遠に気付かないままでした…
直しておきます＞＜
plugin 便利に使わせてもらってます
もしかしたらスペルミスかなと思ったところがありまして、生成されるダミー要素のサフィックスが、模造を意味するなら正しくは dummy ですが、実際には dammy になっていました。
勘違いだったらすみません。念の為ご報告まで。
早速のご返事ありがとうございました。
その方法でうまく動作しました。
どうもありがとうございました:)
こんばんは。
元のSELECT要素とselectableで生成する要素は
連動していないので個別に削除する必要があります。
$(“#target”).selectable();というように$(“#target”)に適用した場合は
と が生成されてその中に$(“#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();
でうまくいくと思います。
一度、$(“#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();
何か方法がありましたらお教えください。よろしくお願いいたします。
はじめまして！
どう質問していいのかわからず、サイトのIDなどもありましたので
記載してあったメールあどれすへ質問させていただきました。
もう2日間も悩み続けて頭の中がかゆくなってきましたので
できましたらお助け下さい・・・・
お早いご回答ありがとうございます。
ajaxはｊQueryを使用しています。
非同期通信後のoptionでも実行できるとのことで
安心しました。
もう少し自分で頑張ってみます。
それでも解決できない時は、お言葉に甘えてメール
させて頂きます。
YUさん＞
Ajax通信はjQueryを使っていますか？
Ajax通信をjQueryを使わずに行っている場合は
Ajax通信自体の実行順序が $(function(){}); 後となり
$().selectable(); 実行時にはselect要素内が空または存在しないので
もしかするとそれが原因かもしれません。
どうしても解決しない場合は…
難しいとは思うんですけれど サンプルを見せてもらうことができれば
原因の確認が取れますので もしよければメールで送ってもらえればと思います。
norimania[at]gmail.com
こちらに質問していいのかわからなかったのですが、
どうしても使いたかったので、すみません。
最後で実行していますが、ajax非同期でoptionを表示している
せいなのかoption要素ゼロとみなされて表示できません。
どうにもならないのでしょうか。
よろしくお願いいたします。
People should read this.
Well said.