過去の記事に以下のようなものがあったのですが、
WordPressのタクソノミーのドロップダウン表示を親と子で分けたい
上記サイトでは以下のコードでwp_list_categoriesのプルダウン表示を実現していました。
JavaScript
1***************************************/ 2// グローバル 3var childListArray = []; 4/*************************************** 5 listToSelect 6 ulリストをプルダウンリストへ書き換え、DOM差し替え 7 親カテゴリ取得&プルダウン作成 8***************************************/ 9function listToSelect(id){ 10 var elm = []; 11 var title ='カテゴリ選択'; 12 13 // 親取得 14 jQuery(id+">ul:not([class='children'])>li>a").each( 15 function(i){ 16 elm[i]=jQuery(this); 17 }); 18 19 var ct='<form>'+"\n"+ 20 '<select onChange="viewChildLists(value);">'+"\n"+ 21 '<option value="">'+title+'</option>'+"\n"; 22 23 // 親カテゴリプルダウン 24 jQuery(elm).each( 25 function(i){ 26 ct += '<option value="'+i+'">'+ 27 jQuery(elm[i]).parent().text().substring(0,(jQuery(elm[i]).parent().text().length-jQuery(elm[i]).siblings().text().length))+ 28 '</option>'+"\n"; 29 } 30 ); 31 ct +='</select>'+"\n"; 32 33 // ダミー子プルダウン 34 ct +='<select id="childList">'+"\n"; 35 ct +='<option value=""> </option>'+"\n"; 36 ct +='</select>'+"\n"; 37 ct +='<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" />'+"\n"; 38 ct +='</form>'+"\n"; 39 40 jQuery(id+" ul").replaceWith(ct); 41 42} 43 44/*************************************** 45 createChildLists 46 子カテゴリリスト取得 47 グローバル変数へ保持。 48***************************************/ 49function createChildLists(id){ 50 var parent = []; 51 var child =[]; 52 53 // 親カテゴリのタイトルとURL取得 54 jQuery(id+">ul:not([class='children'])>li>a").each( 55 function(p){ 56 parent[p] = new Array(); 57 parent[p]["href"]=jQuery(this).attr("href"); 58 // 親カテゴリを件数ごと取得する 59 parent[p]["title"]=jQuery(this).parent().text().substring(0,(jQuery(this).parent().text().length-jQuery(this).siblings().text().length)); 60 }); 61 62 // 子カテゴリ取得 63 jQuery(id+">ul:not([class='children'])>li").each( 64 function(j){ 65 child[j] = new Array(); 66 jQuery(id+">ul:not([class='children'])>li:eq("+j+")>ul.children>li>a").each( 67 function(i){ 68 child[j][i]=jQuery(this); 69 } 70 ); 71 } 72 ); 73 74 // 子カテゴリ配列をグローバル変数へ入れる 75 jQuery(id+">ul:not([class='children'])>li>a").each( 76 function(j){ 77 childListArray[j] = new Array(); 78 // 子カテゴリがないときの為に親カテゴリを入れておく 79 childListArray[j][0] = new Array(); 80 childListArray[j][0]["href"]=parent[j]["href"]; 81 childListArray[j][0]["title"]=parent[j]["title"]; 82 // 子カテゴリのタイトルとURL設定 83 jQuery(child[j]).each( 84 function(i){ 85 childListArray[j][i+1] = new Array(); 86 childListArray[j][i+1]["href"]=jQuery(child[j][i]).attr("href"); 87 childListArray[j][i+1]["title"]=jQuery(child[j][i]).parent().text(); 88 } 89 ); 90 } 91 ); 92 93} 94// 子プルダウン表示 95function viewChildLists(value){ 96 if(value!=''){ 97 jQuery("#childList").empty(); 98 for(j=0; j< childListArray[value].length; j++){ 99 jQuery("#childList").append(jQuery('<option>').attr("value",childListArray[value][j]["href"]).text(childListArray[value][j]["title"])); 100 } 101 } 102} 103 104// 初期化 105jQuery(document).ready(function() { 106 createChildLists(".categories"); // 子カテゴリリストを先に作る 107 listToSelect(".categories"); // なぜならDOM差し替えでulが消えてしまうから。 108}); 109
実際に実行するとタクソノミーのドロップダウン表示が親カテゴリと子カテゴリで別れ、選択したページに遷移するようになっています。
そこで質問なのですが、この仕組みは<input type="submit">にも応用できるのでしょうか?
コード内の
JavaScript
1 ct +='<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" />'+"\n"; 2
の部分を変更すれば可能なのかもしれませんが、以下のサイトを見てonClickによるフォーム送信を仕組みがあることは分かったのですが、実際にどうすれば<input type=”submit”>に応用できるのか分かりませんでした。
JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう
<input type="submit">に使えるのであれば、アンケートフォームや、絞り込み検索などに使えるかなと思ったもので…。
最初からselect要素であれば以下のような仕組みが利用できると思うのですが、
2つのセレクトボックスを連動させるjQuery
ulタグをプルダウンメニューへJavaScriptで書き換えて、そこからフォーム送信が出来るものなのかなと。
※追記です。
文章が分かり難く済みません。
デモは以下のような仕組みになっていますが、
html
1<form> 2疑似プルダウンメニュー 3<input type="button" value="移動" onClick="JavaScript: location.href=this.form.childList.value; return false;" /> 4</form> 5コード
これを以下のように変更出来るのかどうかというのが質問の趣旨です。
onClick以降をどのように記述すればよいのかと思いまして。。。
html
1<form method="post" action="example.cgi"> 2疑似プルダウンメニュー 3<p>名前:<input type="text" name="name"></p> 4<input type="submit" value="送信"> 5</form>
回答1件
あなたの回答
tips
プレビュー