初めまして。早速ですがお教えいただけたら助かります。
仕事の関係で、各都道府県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のフィルターのような事です。 知識もないのに手を出すな!とおっしゃられるかもしれませんが、どうぞよろしくお願いいたします回答2件
あなたの回答
tips
プレビュー