FCafe  プルダウンリストのツリー化

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 タグリストをプルダウン化したりしていてふと思ったのですが、プルダウンリストて項目をグループ分けできますよね。  それを利用すれば 『ツリー化』 と同様の効果を得る事が可能なのではないかと。
・・・という訳で プルダウンリストのツリー化?に挑戦してみました。

sample

 

【 設置法 】 元リスト(フォーム)を以下のような形で書きます

 通常のvalue送信の場合
<form action="./" method="get" name="Form名"> 
 <select name="Select名" onchange="document.Form名.submit()">
  <option value="">リストタイトル</option>
  <!--リスト始-->
  <option value="Value" title="分類要素"> 表示要素 </option>
  <!--/リスト終-->
 </select><noscript><input type="submit" value="Go" /></noscript>
</form>
 
 URLを送信する場合
<form action="http://blog.fc2.com/" method="get" name="Form名"> 
 <select name="jump" onchange="location.href=document.Form名.jump.value">
  <option value="">リストタイトル</option>
  <!--リスト始-->
  <option value="URL" title="分類要素"> 表示要素 </option>
  <!--/リスト終-->
 </select><noscript><input type="submit" value="Go" /></noscript>
</form>
 

上記の後に以下のスクリプトを書きます

<script type="text/javascript"><!--
var A=document.Form名.Select名.getElementsByTagName('option');
var B=new Array();  var L=A.length; k=0;
for(i=1;i<L;i++){ E=A[i].title; if(E!=""){ 
 B[k]=document.createElement("optgroup");  B[k].label=E; 
 for(j=i;j<L;j++){ if(A[j].title==E){
  A[j].title=""; B[k].appendChild(A[j].cloneNode(true)) ;
} } } }
for(i=L-1;i>0;i--){ document.Form名.Select名.removeChild(A[i]) }
for(i=0;i<k;i++){ document.Form名.Select名.appendChild(B[i]) }
//--></script>
 

【 解 説 】  select 中に並ぶ option群を title要素で分類し optgroup で再構成します。
月別archiveに於ける年表示等、グループタイトルとなって個別項目に表示したくない要素は 別途処理を追加して省略します。

ここにお示ししたのは樹状マークを省いた簡易版ですが 樹状マーク付で表示する 「コメント」「TB」「最新記事」「アーカイブ」  の各リストを共有プラグインに登録済みです。
optgroup 内の項目には(どのブラウザでも)かなり大きなインデントが付くようですので、こちらの簡易版にも需要があるかもしれません

Comment

daniel daniel Edit
06/07 01:31

どんなのよ

- - Edit
06/07 10:32

管理人のみ閲覧できます このコメントは管理人のみ閲覧できます

Edit
11/20 19:00

イタリックで表示している部分を、太字で表示させることはできないのですか?

daniel daniel Edit
11/21 00:07

ブラウザの種類によってイタリックになるならないの違いはありますが
私のPC(XP)では IE, Firefox, Opera, Safari のいずれでもグループタイトルは太字で表示されています。
k さんが御覧になるサンプルは太字になっていないのでしょうか?

Edit
11/21 08:07

すみません、質問の仕方が悪かったようです。
私はvistaでIEを使用していて、グループタイトルはイタリックと太字で表示されています。そのイタリックを外して太字のみで表示させることはできないのでしょうか?
お手数おかけして申し訳ございません;;

daniel daniel Edit
11/21 18:18

いろいろやってみましたが (←ヲィ) 難しいようです
以下↓を御参照下さい( 他のブラウザでは可能です )
http://hyper-text.org/archives/2007/05/optgroup_css.shtml


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/557-fdfda79c

Shown after Admisson
.

≫ コメント投稿感謝画面 option要素のCSS装飾 ≪

2008 / 05 / 31  Sat
Navigation   
Comment 6 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。