質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

912閲覧

JavaScript 疑似的プルダウンからのフォーム送信について

MyQuestioner

総合スコア57

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/12/17 11:12

編集2018/12/18 06:10

過去の記事に以下のようなものがあったのですが、
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mks

2018/12/18 04:59

> そこで質問なのですが、この仕組みは<input type="submit">にも応用できるのでしょうか? 具体的にどの部分を応用して具体的にどのような動作をさせたいのかがよくわからなかったのですが、ドロップダウンの選択状態でフォームの送信先(form要素のaction)を変えたいということでしょうか?
guest

回答1

0

ベストアンサー

select要素にname属性を与えたら、通常のsubmitで値が送信されますよ。

投稿2019/01/05 02:33

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MyQuestioner

2019/01/05 10:52

kei344様 ご回答ありがとうございました。 なるほど、そういうことなんですね。 ずっと「onClick=」以降に何を書くのかと考えていました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問