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

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

ただいまの
回答率

88.09%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,745

score 250

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

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

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

    <tr>
        <td><label>カテゴリーを選択する</label></td>
        <td><select id="lv1Pulldown" size="2" class="text">
          <option value="1">不動産</option>
          <option value="2">その他</option>
        </select>
        </td>

        <td><select id="lv2Pulldown" size="3" class="text" disabled="disabled">
          <option value="4" class="p1">賃貸</option>
          <option value="5" class="p1">売買</option>
          <option value="6" class="p2">その他</option>
       </select>
        </td>

        <td><select id="lv3Pulldown" size="4" class="text" disabled="disabled">
          <option value="7" class="p4">マンション・アパート</option>
          <option value="8" class="p4">戸建</option>
          <option value="9" class="p4">土地(借地権)</option>
          <option value="10" class="p4">その他</option>
          <option value="11" class="p5">マンション・アパート</option>
          <option value="12" class="p5">土地建物</option>
          <option value="13" class="p5">土地</option>
          <option value="14" class="p5">その他</option>
          <option value="15" class="p6">その他</option>
        </select>
        </td>
        </tr>
<script type="text/javascript">
  $(document).ready(function(){
    var pd2 = $("#lv2Pulldown option").clone();
    var pd3 = $("#lv3Pulldown option").clone();
    $("#lv2Pulldown").hide();
    $("#lv3Pulldown").hide();

    $("#lv1Pulldown").change(function () {
     var lv1Val = $("#lv1Pulldown").val();
     $("#lv2Pulldown").removeAttr("disabled");
     $("#lv2Pulldown option").remove();
     $(pd2).appendTo("#lv2Pulldown");
     $("#lv2Pulldown option[class != p"+lv1Val+"]").remove();
     $("#lv3Pulldown").attr("disabled", "disabled");
     $("#lv3Pulldown option").remove();
     $("#lv2Pulldown").show();
   });

    $("#lv2Pulldown").change(function () {
    var lv2Val = $("#lv2Pulldown").val();
    $("#lv3Pulldown").removeAttr("disabled");
    $("#lv3Pulldown option").remove();
    $(pd3).appendTo("#lv3Pulldown");
    $("#lv3Pulldown option[class != p"+lv2Val+"]").remove();
    $("#lv3Pulldown").show();
  });
})
  </script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/14 01:49

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

    キャンセル

  • SugiuraY

    2017/03/14 13:30

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

    キャンセル

回答 2

checkベストアンサー

0

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

$(function(){
  $('#lv1Pulldown').on('change',function(){
    var v1=$(this).val();
    var v2=$('#lv2Pulldown').val();
    $('#lv2Pulldown').prop('disabled',v1=="");
    $('#lv2Pulldown option[class^=p]').each(function(){$(this).toggle($(this).hasClass('p'+v1))});
    $('#lv2Pulldown option[value=""]').prop('selected',true);
    $('#lv2Pulldown').trigger('change');
    $('#lv3Pulldown').prop('disabled',v1=="" || v2=="");
  }).trigger('change');
  $('#lv2Pulldown').on('change',function(){
    var v2=$(this).val();
    $('#lv3Pulldown').prop('disabled',$(this).val()=="");
    $('#lv3Pulldown option[class^=p]').each(function(){$(this).toggle($(this).hasClass('p'+v2))});
    $('#lv3Pulldown option[value=""]').prop('selected',true);
  }).trigger('change');;
});
<table>
<tr>
<td><label>カテゴリーを選択する</label></td>
<td><select id="lv1Pulldown" size="3" class="text">
<option value="" selected>---</option>
<option value="1">不動産</option>
<option value="2">その他</option>
</select>
</td>

<td><select id="lv2Pulldown" size="4" class="text" disabled="disabled">
<option value="" selected>---</option>
<option value="4" class="p1">賃貸</option>
<option value="5" class="p1">売買</option>
<option value="6" class="p2">その他</option>
</select>
</td>

<td><select id="lv3Pulldown" size="5" class="text" disabled="disabled">
<option value="" selected>---</option>
<option value="7" class="p4 p5">マンション・アパート</option>
<option value="8" class="p4">戸建</option>
<option value="9" class="p4">土地(借地権)</option>
<option value="10" class="p5">土地建物</option>
<option value="11" class="p5">土地</option>
<option value="12" class="p4 p5 p6">その他</option>
</select>
</td>
</tr>
</table>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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 13:31

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

    キャンセル

  • 2017/03/14 16:09 編集

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

    キャンセル

  • 2017/03/14 16:13

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

    キャンセル

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

  • ただいまの回答率 88.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る