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

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

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

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

jQuery

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

Q&A

解決済

2回答

3963閲覧

Jqueryでselect-optionの選択肢によって、次のselect-optionを変化して表示させる(hierselect )

SugiuraY

総合スコア317

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/03/13 15:43

編集2017/03/14 04:30

お世話になります。
掲題のように、選択肢によってJqueryを利用して動的に次の選択肢を変化表示させるコードを作成しております。下記のようにhideとshowで隠すまたは表示するような動きは作ることができたのですが、一部の情報を見ているとブラウザによっては非推奨の方法であるとのご意見もありました。実際には許可しない組み合わせや操作を防ぐvalidationの目的では問題ないように思えたのですが

【追記】
hide,showの非推奨の情報について、明確化致します。
ttp://www.tinybeans.net/blog/2016/03/07-151657.html
本サイトを参考にした際に、IEのブラウザでは意図した動作(隠れてはくれない)
との情報に基づくものです。

違う方法等を推奨するご意見や推奨されない理由をご教示願えますでしょうか?

HTML

1 <tr> 2 <td><label>カテゴリーを選択する</label></td> 3 <td><select id="lv1Pulldown" size="2" class="text"> 4 <option value="1">不動産</option> 5 <option value="2">その他</option> 6 </select> 7 </td> 8 9 <td><select id="lv2Pulldown" size="3" class="text" disabled="disabled"> 10 <option value="4" class="p1">賃貸</option> 11 <option value="5" class="p1">売買</option> 12 <option value="6" class="p2">その他</option> 13 </select> 14 </td> 15 16 <td><select id="lv3Pulldown" size="4" class="text" disabled="disabled"> 17 <option value="7" class="p4">マンション・アパート</option> 18 <option value="8" class="p4">戸建</option> 19 <option value="9" class="p4">土地(借地権)</option> 20 <option value="10" class="p4">その他</option> 21 <option value="11" class="p5">マンション・アパート</option> 22 <option value="12" class="p5">土地建物</option> 23 <option value="13" class="p5">土地</option> 24 <option value="14" class="p5">その他</option> 25 <option value="15" class="p6">その他</option> 26 </select> 27 </td> 28 </tr>

JavaScript

1<script type="text/javascript"> 2 $(document).ready(function(){ 3 var pd2 = $("#lv2Pulldown option").clone(); 4 var pd3 = $("#lv3Pulldown option").clone(); 5 $("#lv2Pulldown").hide(); 6 $("#lv3Pulldown").hide(); 7 8 $("#lv1Pulldown").change(function () { 9 var lv1Val = $("#lv1Pulldown").val(); 10 $("#lv2Pulldown").removeAttr("disabled"); 11 $("#lv2Pulldown option").remove(); 12 $(pd2).appendTo("#lv2Pulldown"); 13 $("#lv2Pulldown option[class != p"+lv1Val+"]").remove(); 14 $("#lv3Pulldown").attr("disabled", "disabled"); 15 $("#lv3Pulldown option").remove(); 16 $("#lv2Pulldown").show(); 17 }); 18 19 $("#lv2Pulldown").change(function () { 20 var lv2Val = $("#lv2Pulldown").val(); 21 $("#lv3Pulldown").removeAttr("disabled"); 22 $("#lv3Pulldown option").remove(); 23 $(pd3).appendTo("#lv3Pulldown"); 24 $("#lv3Pulldown option[class != p"+lv2Val+"]").remove(); 25 $("#lv3Pulldown").show(); 26 }); 27}) 28 </script>

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

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

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

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

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

kei344

2017/03/13 16:49

「一部の情報」を具体的にされたほうが良いと思います。
SugiuraY

2017/03/14 04:30

ご指摘有難うございます。具体的に加筆を致しました。
guest

回答2

0

ベストアンサー

なんともいえませんが、lv3の共通項目はまとめちゃった方がよくないですか?
以下とりあえず動くバージョン、もう少し効率的な書き方もあると思います

javascript

1$(function(){ 2 $('#lv1Pulldown').on('change',function(){ 3 var v1=$(this).val(); 4 var v2=$('#lv2Pulldown').val(); 5 $('#lv2Pulldown').prop('disabled',v1==""); 6 $('#lv2Pulldown option[class^=p]').each(function(){$(this).toggle($(this).hasClass('p'+v1))}); 7 $('#lv2Pulldown option[value=""]').prop('selected',true); 8 $('#lv2Pulldown').trigger('change'); 9 $('#lv3Pulldown').prop('disabled',v1=="" || v2==""); 10 }).trigger('change'); 11 $('#lv2Pulldown').on('change',function(){ 12 var v2=$(this).val(); 13 $('#lv3Pulldown').prop('disabled',$(this).val()==""); 14 $('#lv3Pulldown option[class^=p]').each(function(){$(this).toggle($(this).hasClass('p'+v2))}); 15 $('#lv3Pulldown option[value=""]').prop('selected',true); 16 }).trigger('change');; 17}); 18

HTML

1<table> 2<tr> 3<td><label>カテゴリーを選択する</label></td> 4<td><select id="lv1Pulldown" size="3" class="text"> 5<option value="" selected>---</option> 6<option value="1">不動産</option> 7<option value="2">その他</option> 8</select> 9</td> 10 11<td><select id="lv2Pulldown" size="4" class="text" disabled="disabled"> 12<option value="" selected>---</option> 13<option value="4" class="p1">賃貸</option> 14<option value="5" class="p1">売買</option> 15<option value="6" class="p2">その他</option> 16</select> 17</td> 18 19<td><select id="lv3Pulldown" size="5" class="text" disabled="disabled"> 20<option value="" selected>---</option> 21<option value="7" class="p4 p5">マンション・アパート</option> 22<option value="8" class="p4">戸建</option> 23<option value="9" class="p4">土地(借地権)</option> 24<option value="10" class="p5">土地建物</option> 25<option value="11" class="p5">土地</option> 26<option value="12" class="p4 p5 p6">その他</option> 27</select> 28</td> 29</tr> 30</table>

投稿2017/03/14 06:55

yambejp

総合スコア114572

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

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

0

掲題のように、選択肢によってJqueryを利用して動的に次の選択肢を変化表示させるコードを作成しております。下記のようにhideとshowで隠すまたは表示するような動きは作ることができたのですが、一部の情報を見ているとブラウザによっては非推奨の方法であるとのご意見もありました。実際には許可しない組み合わせや操作を防ぐvalidationの目的では問題ないように思えたのですが

いやいや、hideして押せないようにする、という設計方針なら他の人がとやかく言うようなことではないと思いますよ。少なくとも、プログラム上の問題にはならないと思います。
要素が消えるのでデザインが狂わないようにする必要はありますが・・・

あえて挙げるとすると、UIの部品が見えていないと、ユーザーが動作を類推しにくい、って言うのがありますよね。
ここを選ぶと次が出てくるって分からないですよね。そのくらいかなぁ・・・

kei344さんと同じように、何を言おうとしているのか、一部の情報って言うのが見てみたいです。

追記

ドロップダウンリストの中の特定の選択肢(option要素)だけ非表示にしたいときは、jQuery の .hide() を使えば簡単に実現できそうです。

Chrome や Firefox はそれで実現できますが、残念ながら Internet Explorer は option 要素を .hide() で非表示にすることができません。ということは、CSS で display: none; してもダメということです。

これは、option要素をhideする、と言っています。selectではありません。
SugiuraYさんのはそうなってませんよね?

投稿2017/03/14 04:01

編集2017/03/14 07:01
shi_ue

総合スコア4437

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

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

SugiuraY

2017/03/14 04:31

ご回答有難うございます。 内容を質問の中に加筆いたしました。 よろしくおねがいもうしあげます。
pegy

2017/03/14 07:10 編集

コメントを削除致しました。
SugiuraY

2017/03/14 07:13

コメント有難うございます。どのような要素においてもhideメソッドがブラウザによって意図しない挙動を示すのではないかと懸念してご質問させて頂きました次第でございます。結果的にご回答、コメントを頂き、恐らく問題はないであろうと推察をしております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問