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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1519閲覧

JQuery bsmSelectの実装方法について

mt25_kazuyan

総合スコア7

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/22 04:46

編集2016/07/22 22:55

初めまして。早速ですがお教えいただけたら助かります。
仕事の関係で、各都道府県HPのIE対応リストを作成しております。
従来はhtmlでtableを作って一覧として表示していましたが、利用者から「Excelのようにフィルターできないか?」と言われ、経験が全くありませんでしたが、ネットを検索しているうちにこちらのサイト(http://blog.satoyan.net/archives/65469314.html)に行きつき、見よう見まねで実装してみました。
その後、利用者から「複数選択できるようにならないか」と言われ、勉強ついでにやってみるかと始めたところ、複数選択できるJQuery(bsmselect)があるとしり、これまた何気に実装してみました。(参照サイト:http://kachibito.net/web-design/bsmselect.html)
しかし、セレクトボックスは表示され、選択はできるものの、選択した箇所が表示されることもなく、知識もないので途方にくれております。
構文の何かが足りないのだろうとは思うのですが、そこがわからないため、お力をお貸しいただければと思っています。

htmlの内容は以下のようになっています。
※全てではなく抜粋で掲載します。
###ここから

<script type="text/javascript" src="jquery.bsmselect.js"></script> <link rel="stylesheet" type="text/css" href="jquery.bsmselect.css" /> <link rel="stylesheet" type="text/css" href="prettify.css" /> <script type="text/javascript"> jQuery(function($) { $("select[multiple]").bsmSelect(); }); </script> </head> <form> <p> <select name="cities" multiple="multiple" title="参照したい所を選んでください" style="width:400px"> <optgroup label="中央省庁"> <option>政府電子調達(GEPS)</option> <option>文部科学省 電子入札システム</option> <option>農林水産省 電子入札システム</option> <option>国土交通省 電子入札システム</option> <option>防衛施設建設工事 電子入札システム</option> <option>裁判所 電子入札システム</option> <option>金融庁 電子開示システム(EDINET)</option> </optgroup> <optgroup label="北海道・東北地方"> <option>北海道</option> <option>>青森県</option> <option>岩手県</option> <option>宮城県(工事)</option> <option>宮城県(物品)</option> <option>秋田県(工事)</option> <option>秋田県(物品)</option> <option>山形県</option> <option>福島県(工事)</option> <option>福島県(物品)</option> </optgroup>

---途中略---

<input onclick="hideRow()" type="button" value="表示 / 非表示"> </form> <table style="border: 1px solid #ccc;"> <thead> <tr> <th style="border: 1px solid #ccc; padding: 5px;">発注機関</th> <th style="border: 1px solid #ccc; padding: 5px;">Win 7</th> <th style="border: 1px solid #ccc; padding: 5px;">Win 8</th> <th style="border: 1px solid #ccc; padding: 5px;"">Win8.1</th> <th style="border: 1px solid #ccc; padding: 5px;">Win10</th> <th style="border: 1px solid #ccc; padding: 5px;">IE 9</th> <th style="border: 1px solid #ccc; padding: 5px;">IE10</th> <th style="border: 1px solid #ccc; padding: 5px;">IE11</th> <th style="border: 1px solid #ccc; padding: 5px;">JRE6</th> <th style="border: 1px solid #ccc; padding: 5px;">JRE7</th> <th style="border: 1px solid #ccc; padding: 5px;">JRE8</th> <th style="border: 1px solid #ccc; padding: 5px;">備考</th> </tr> </thead> <tbody> <tr id="1"> <td style="border: 1px solid #ccc; padding: 5px;">政府電子調達(GEPS)</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;"><a href="javascript:void(window.open('geps_java.html', 'mywindow3', 'width=600, height=300, menubar=no, toolbar=no, scrollbars=yes'));">○</a></td> <td style="border: 1px solid #ccc; padding: 5px;">ポータルサイトではFirefox13,14も使用可</td> </tr> <tr id="2"> <td style="border: 1px solid #ccc; padding: 5px;">文部科学省 電子入札システム</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;"> </td> </tr> <tr id="3"> <td style="border: 1px solid #ccc; padding: 5px;">農林水産省 電子入札システム</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">×</td> <td style="border: 1px solid #ccc; padding: 5px;">○</td> <td style="border: 1px solid #ccc; padding: 5px;">JREの詳細バージョンは認証局に確認要</td> </tr>

----中略---

</tbody> </table> ###ここまで 目標は、複数を選択できるExcelのフィルターのような事です。 知識もないのに手を出すな!とおっしゃられるかもしれませんが、どうぞよろしくお願いいたします

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

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

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

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

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

kei344

2016/07/22 06:03

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、URLにはリンクを張ることができますので、よろしくお願いします。
MaShiRo_H

2016/07/22 06:29

こんにちは! そもそもでテーブルに選択項目やテーブルの項目を理解できず、 実装されたい内容が掴めません...>< 実装したいのは、 ①都道府県を複数選択→該当するテーブルの表示 でしょうか? ②省庁×都道府県→該当のテーブル(行?)の表示 でしょうか? よろしくお願いしますm(_ _)m
mt25_kazuyan

2016/07/22 06:40

kei344さん すみません。使い方も理解しないうちに焦って投稿してしまいました。以後気を付けます。申し訳ありません
mt25_kazuyan

2016/07/22 06:42

MaShiRo_Hさん。申し訳ありませんでした。やりたいことは「都道府県・省庁」を複数選択して、対象のテーブルを表示させることです。
kei344

2016/07/22 06:47

投稿は今から編集できるので、それの依頼をこのフォームでしています。お願いできませんか?
MaShiRo_H

2016/07/22 06:52

ご返信ありがとうございますm(_ _)m 青森県 × 文部科学省 電子入札システム → 青森県の文部科学省 電子入札システムの行 のように(単×単)はもちろん、 北海道/青森県 × 文部科学省 電子入札システム/農林水産省 電子入札システム → 北海道の文部科学省 電子入札システムと農林水産省 電子入札システムの行 青森県の文部科学省 電子入札システムと農林水産省 電子入札システムの行 というように(複×複)や(単×複)、(複×単)も可能という認識で問題ございませんか?
mt25_kazuyan

2016/07/22 22:58

kei344さん。遅くなってすいません。訂正してみましたが、こちらで間違ってませんでしょうか?間違っていないなら今後質問するときはこのようにきちんと投稿するように気を付けたいと思います。どうぞ今後ともよろしくお願いいたします
mt25_kazuyan

2016/07/22 23:02

MaShiRo_Hさん。返信が遅くなりました、申し訳ありません。そのような認識で間違いありません。本当になんといっていいか。。感謝しかありません。ありがとうございます。
guest

回答2

0

ベストアンサー

こんにちは!
お返事いただいていたのに気付けずにおりましたm(_ _)m
申し訳ありません;

泥臭い感じになってしまいましたが、
プラグインを使うといざカスタマイズしようというときに大変なので、
なるべく解読してご自身でも触れるようにやってみました。

HTML

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!-- 重要--> 2 3<form> 4<select name="cities" multiple="multiple" title="参照したい都道府県を選んでください" style="width:400px"> 5 <optgroup label="北海道・東北地方"> 6 <option>北海道</option> 7 <option>青森県</option> 8 </optgroup> 9</select> 10<select name="system" multiple="multiple" title="参照したいシステムを選んでください" style="width:400px"> 11 <optgroup label="中央省庁"> 12 <option>政府電子調達(GEPS)</option> 13 <option>文部科学省 電子入札システム</option> 14 </optgroup> 15</select> 16<div class="select_button">OK</div> 17</form> 18 19<div class="box" style="display:none"> 20 <h2 class="city_name">北海道</h2> 21 <table style="border: 1px solid #ccc;"> 22 <thead> 23 <tr> 24 <th style="border: 1px solid #ccc; padding: 5px;">発注機関</th> 25 <th style="border: 1px solid #ccc; padding: 5px;">Win 7</th> 26 <th style="border: 1px solid #ccc; padding: 5px;">Win 8</th> 27 </tr> 28 </thead> 29 <tbody> 30 <tr id="1"> 31 <td style="border: 1px solid #ccc; padding: 5px;">政府電子調達(GEPS)</td> 32 <td style="border: 1px solid #ccc; padding: 5px;">○</td> 33 <td style="border: 1px solid #ccc; padding: 5px;">×</td> 34 </tr> 35 <tr id="2"> 36 <td style="border: 1px solid #ccc; padding: 5px;">文部科学省 電子入札システム</td> 37 <td style="border: 1px solid #ccc; padding: 5px;">○</td> 38 <td style="border: 1px solid #ccc; padding: 5px;">×</td> 39 </tr> 40 </tbody> 41 </table> 42</div> 43 44<div class="box" style="display:none"> 45 <h2 class="city_name">青森県</h2> 46 <table style="border: 1px solid #ccc;"> 47 <thead> 48 <tr> 49 <th style="border: 1px solid #ccc; padding: 5px;">発注機関</th> 50 <th style="border: 1px solid #ccc; padding: 5px;">Win 7</th> 51 <th style="border: 1px solid #ccc; padding: 5px;">Win 8</th> 52 </tr> 53 </thead> 54 <tbody> 55 <tr id="1"> 56 <td style="border: 1px solid #ccc; padding: 5px;">政府電子調達(GEPS)</td> 57 <td style="border: 1px solid #ccc; padding: 5px;">○</td> 58 <td style="border: 1px solid #ccc; padding: 5px;">×</td> 59 </tr> 60 <tr id="2"> 61 <td style="border: 1px solid #ccc; padding: 5px;">文部科学省 電子入札システム</td> 62 <td style="border: 1px solid #ccc; padding: 5px;">○</td> 63 <td style="border: 1px solid #ccc; padding: 5px;">×</td> 64 </tr> 65 </tbody> 66 </table> 67</div>

Javascript

1<script> 2$(function(){ 3 $(".select_button").on("click",function(){ //select_buttonクリック時に実行 4 $(".box, tbody tr").hide(); //全てをdisplay:noneの状態に戻す 5 var cities = $("select[name='cities'] option:selected"); //選択されたoption(都道府県)を変数に代入 6 var citH2 = $("h2.city_name") //判断材料<h2 class="city_name">...</h2>を変数に代入 7 $.each(cities,function(i) { //選択されたoptionを一つずつ取り出す 8 $.each(citH2,function(j) { //<h2 class="city_name">...</h2>を一つずつ取り出す 9 if (citH2[j].innerHTML == cities[i].innerHTML) { 10 $(citH2[j]).parent().show(); //取り出したそれぞれの中のテキストが一致した場合、<h2>の一つ上の親要素をdisplay:blockにして表示 11 } 12 }); 13 }); 14 var system = $("select[name='system'] option:selected"); //選択されたoption(システム)を変数に代入 15 var sysTd = $("tr td:first-child") //判断材料の各<tr>...</tr>の最上<td>...</td>を変数に代入 16 $.each(system,function(i) { 17 $.each(sysTd,function(j) { 18 if (sysTd[j].innerHTML == system[i].innerHTML) { 19 $(sysTd[j]).parent().css("display","table-row"); 20 } 21 }); 22 }); 23 }); 24}); 25</script>

そもそもで実現したいことと、回答内容が合っているか不安ですが...
まず、ベタっと貼っていただければ動くとは思います。

選択された<option>直下のテキストと、<h2><td>直下のテキストが一致した場合、それぞれのテーブル・行を表示する、という形式になっています。
欠点としては、テキストが少しでも違ってしまうと(青森県→青森にしてしまうなど)、JSは全く動かなくなってしまいます。
表記名を違うものにしたい場合は判断材料を要素直下のテキストではなく、各要素のidやclassにするなどの方法で対応は可能です。

ちなみにプラグインが動かない問題ですが、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

↑jQuery本体の読み込み・DL漏れはございませんか?

投稿2016/07/25 13:55

MaShiRo_H

総合スコア328

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

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

mt25_kazuyan

2016/07/26 00:56

MaShiRo_Hさん あ・・ありがとうございます。うごきました(;_;) 一時はやはりスキルの無いものが手を出してはいけない、勉強してからとあきらめていました。本当にうれしいです。 せっかくわかりやすく書いていただいたので、これを機会に勉強して新しいスキルとして身に着けていきたいと思います。 プラグインについてですが、言われてから調べてみたところ、なぜかWebフィルタサーバでブロックされておりました。これもご指摘されなければ全くわかってませんでした。 心から感謝申し上げます!
MaShiRo_H

2016/07/26 01:38

こんにちは! 動いたようで、良かったです^^♪ 私もまだまだ始めて間も無い身ですので、記載したJSの内容もそこまで難しくないかと思います。 コードが汚くても、手探りでも、動くとやはり嬉しいですし、意外とできちゃうもんなんだな、と感じると思いますよ^^/ 数ヶ月前はここで質問することしかできませんでしたが(しかも結構めちゃくちゃな質問。。笑)、手を動かしているうちに私もなんとか回答できる立場になれましたb お互い、がんばりましょう〜!
guest

0

本件と関係ないと思いますが、" が一つ多いです。

HTML

1<th style="border: 1px solid #ccc; padding: 5px;"">Win8.1</th>

まず、使用されている「絞込みできるテーブルライブラリ」に「複数セレクトを便利にするライブラリ」を組み合わせておられると予想します。

ただ単に両方を読み込むだけでは組み合わさらないので、セレクトを切り替えたタイミングでフィルタの更新をすることになると思いますが、そもそもソートライブラリのほうが複数値による絞込みに対応していないのではないでしょうか。

別の複数絞込みに対応したライブラリなどを探されてはいかがでしょうか。

【Dynamic Table】
http://code.keylimebox.org/dynamic-table/

【Sample of the Dynamic Table in Use】
https://rawgit.com/key-lime-box/dynamic-table/master/sample/index.html

投稿2016/07/23 05:32

kei344

総合スコア69364

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

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

mt25_kazuyan

2016/07/24 11:50

回答ありがとうございます。本来の自分の業務が多忙で、お返事を返すのが遅れたことをお詫びいたします。 情報等ありがとうございます。 よく考えてみたいと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問