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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

2224閲覧

selectボックスでの絞り込みで対象の内容を非選択ではなく非表示にしたい

soso0programmer

総合スコア35

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/10/13 04:34

編集2020/10/13 04:45

現在、chosenライブラリを使って選択した部署に関連する社員のみ、選択可能にしています。
現段階では、非選択で絞り込んでいるのですが、非選択ではなく非表示にしたい場合はどのようにすればいいでしょうか?

html

1<!DOCTYPE html> 2<html lang="ja" class="nanikore"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 9 <!--Bootstrap CSS --> 10 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 11 12 <!--Font Awesome5--> 13 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 14 15 <link rel="stylesheet" href="../css/stylesheet.css"> 16 17 <link rel="stylesheet" href="../css/chosen-css.css"> 18 19</head> 20 21<body class="nanikore"> 22 23 <div class="container h-100"> 24 25 <div class="row align-items-center h-100"> 26 <div class="col-6 mx-auto"> 27 <div class="jumbotron text-center" style="background-color: #5ca580;"> 28 <div class="text-center"> 29 30 <h2 class="mb-5"><i class="fas fa-users"></i>担当者を選択してください</h2> 31 <form action="" class="form-inline justify-content-center"> 32 33 <div class="form-inline"> 34 35 <div class="search-box form-group mb-2 ml-2"> 36 <select class="chosen-select form-control" id="visitor_id"> 37 <option value="" style="font-weight: 100;">部署選択</option> 38 <option value="itsol">ITソリューション部</option> 39 <option value="jigyou">事業管理部</option> 40 <option value="eigyou">営業グループ</option> 41 </select> 42 </div> 43 44 <div class="form-group mb-2 ml-2 mr-5"> 45 <select class="chosen-select form-control list" name="visitor_id"> 46 <option value="">氏名選択</option> 47 <option class="list_item" data-visitor_id="itsol">山田(やまだ)</option> 48 <option class="list_item" data-visitor_id="itsol">田中(たなか)</option> 49 <option class="list_item" data-visitor_id="jigyou">佐藤(さとう)</option> 50 <option class="list_item" data-visitor_id="jigyou">鈴木(すずき)</option> 51 <option class="list_item" data-visitor_id="eigyou">中田(なかた)</option> 52 </select> 53 </div> 54 </div> 55 56 <div class="form-inline"> 57 58 <div class="search-box form-group mb-2 ml-2"> 59 <select class="chosen-select form-control" id="exiter_id"> 60 <option value="" style="font-weight: 100;">部署選択</option> 61 <option value="itsol">ITソリューション部</option> 62 <option value="jigyou">事業管理部</option> 63 <option value="eigyou">営業グループ</option> 64 </select> 65 </div> 66 67 <div class="form-group mb-2 ml-2 mr-5"> 68 <select class="chosen-select form-control list" name="exiter_id"> 69 <option value="">氏名選択</option> 70 <option class="list_item" data-exiter_id="itsol">山田(やまだ)</option> 71 <option class="list_item" data-exiter_id="itsol">田中(たなか)</option> 72 <option class="list_item" data-exiter_id="jigyou">佐藤(さとう)</option> 73 <option class="list_item" data-exiter_id="jigyou">鈴木(すずき)</option> 74 <option class="list_item" data-exiter_id="eigyou">中田(なかた)</option> 75 </select> 76 </div> 77 </div> 78 79 80 81 <div class="ml-1 mt-5"> 82 <button type="button" class="btn btn-primary" data-toggle="modal" 83 data-target="#tabModal">入力完了 84 </button> 85 86 <!-- Modal --> 87 <div class="modal fade" id="tabModal" tabindex="-1" role="dialog" 88 aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 89 <div class="modal-dialog modal-dialog-centered" role="document"> 90 <div class="modal-content"> 91 <div class="modal-header"> 92 <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5> 93 <button type="button" class="close" data-dismiss="modal" 94 aria-label="Close"> 95 <span aria-hidden="true">&times;</span> 96 </button> 97 </div> 98 <div class="modal-body"> 99 <p>こちらの担当者であっていますか?</p> 100 メールアドレス: 101 <p id="mail-mail"></p> 102 担当者名: 103 <p id="name-name"></p> 104 </div> 105 <div class="modal-footer"> 106 <a href="" type="button" class="btn btn-secondary" 107 data-dismiss="modal">キャンセル</a> 108 <button type="submit" class="btn btn-primary">OK</button> 109 </div> 110 </div> 111 </div> 112 113 </div> 114 115 </div> 116 117 118 119 </form> 120 121 </div> 122 123 </div> 124 </div> 125 </div> 126 127 128 </div> 129 130 <!-- Optional JavaScript --> 131 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 132 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 133 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 134 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 135 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script> 136 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> 137 138 139 140 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 141 <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> 142 <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"> 143 144 <script src="../実験フォルダ/js/script.js"></script> 145 146</body> 147 148</html>

js

1 2//chosen 3$('.chosen-select').chosen({ 4 search_contains: true 5}); 6 7$(function () { 8 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 9 var listItem = '.list_item'; // 絞り込み対象のアイテム 10 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 11 $(function () { 12 // 絞り込み項目を変更した時 13 $(document).on('change', '.search-box select', function () { 14 search_filter(this); 15 $('.chosen-select').trigger("chosen:updated"); // 追加 16 }); 17 }); 18 //リストの絞り込みを行う 19 function search_filter(e) { 20 // 非表示状態を解除 21 // $(listItem).removeClass(hideClass); 22 $(e, listItem).attr('disabled', false); 23 for (var i = 0; i < $(e, '.search-box select').length; i++) { 24 var name = $(e, '.search-box select').eq(i).attr('id'); 25 // 選択されている項目を取得 26 var searchData = get_selected_input_items(e, name); 27 // 選択されている項目がない、またはALLを選択している場合は飛ばす 28 if (searchData.length === 0 || searchData[0] === '') { 29 continue; 30 } 31 // リスト内の各アイテムをチェック 32 for (var j = 0; j < $('select[name="' + e.id + '"] ' + listItem).length; j++) { 33 // アイテムに設定している項目を取得 34 var itemData = $('select[name="' + e.id + '"] ' + listItem).eq(j).data(name); 35 // 絞り込み対象かどうかを調べる 36 if (searchData.indexOf(itemData) === -1) { 37 //$(listItem).eq(j).addClass(hideClass); 38 $('select[name="' + e.id + '"] ' + listItem).eq(j).attr('disabled', true); 39 } else { 40 $('select[name="' + e.id + '"] ' + listItem).eq(j).attr('disabled', false); 41 } 42 } 43 } 44 } 45 //選択されているoptionのvalue属性の値 46 function get_selected_input_items(e, name) { 47 var searchData = []; 48 // $('[name=' + name + ']:checked').each(function() { 49 $(e, 'select[name=' + name + '] option:selected').each(function () { 50 searchData.push($(e, '#visitor_id option:selected').val()); 51 }); 52 return searchData; 53 } 54});

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

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

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

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

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

m.ts10806

2020/10/13 04:41

thymeleaf前提でないのならthymeleaf要素は排除したコードを提示されたほうが良いかと思います
soso0programmer

2020/10/13 04:45

コメントありがとうございます。 修正いたしました。
guest

回答2

0

ajaxを利用する方法をお勧めしてもらったのですが、今回はjQueryのshow,hideメソッドで解決することにしました。

投稿2020/10/21 04:03

soso0programmer

総合スコア35

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

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

0

ベストアンサー

cssでoptionタグにdisplay:noneを与えれば画面上非表示にできますが、ブラウザによって対応していないようなので、「有効なリスト」のみでselectの中身を毎回作り直した方が良さそうにも思います。

投稿2020/10/13 04:47

m.ts10806

総合スコア80765

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

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

soso0programmer

2020/10/19 04:56

返信が遅れて申し訳ありません。 現在取り組んでいるのですが、「有効なリスト」のみというのは、部署が選択された際に、DBからその部署に関連する社員を引っ張ってきてselectの中身に入れるということでしょうか?
m.ts10806

2020/10/19 04:57

イメージとしては仰る形で良いと思います。 非同期(Ajaxなど)処理を使えば切り替えも可能かと思います。
soso0programmer

2020/10/19 05:00

返信ありがとうございます。 Ajaxというものについて詳しく調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問