php+mysql+javascriptで表出しているDBのtableから取得した要素のソート機能実装について

やりたきこと

PHPでDBのtableに格納されているデータを表示し、フロント側でセレクトボックスで選択した項目によってだしわけを行いたいです。

php
1<!DOCTYPE html>
2    <html lang="ja">
3
4    <head>
5        <script type="text/javascript" src="select.js">
6        </script>
7        <meta charset="utf-8">
8    </head>
9
10    <body>
11        <form id="f">
12            <br>
13            <select name="sel" id="sel" onchange="select()">
14                <option value="hoge">hoge</option>
15                <option value="fuga">fuga</option>
16                <option value="puga">puga</option>
17            </select>
18            <br>
19
20            <?php
21//データベースに接続(非推奨なので後ほど書き換えます)
22$con = mysql_connect("localhost", "root","");
23
24//データベースを選択
25mysql_select_db("ecdb", $con);
26
27//SQL文をセット
28$quryset1 = mysql_query("SELECT * FROM products WHERE category='aaa';");
29$quryset2 = mysql_query("SELECT * FROM products WHERE category='bbb';");
30$quryset3 = mysql_query("SELECT * FROM products WHERE category='ccc';");
31    
32echo "<table border='1'>";
33echo "<tr>";
34echo "<td>商品名";
35echo "</td>";
36echo "<td>カテゴリ";
37echo "</td>";
38echo "<td>ブランド";
39echo "</td>";
40echo "<td>メーカー";
41echo "</td>";
42echo "<td>価格";
43echo "</td>";
44echo "<td>成分";
45echo "</td>";
46echo "<td>商品説明";
47echo "</td>";
48echo "</tr>";
49
50    
51//１ループで１行データが取り出され、データが無くなるとループを抜ける
52while ($data1 = mysql_fetch_array($quryset1)){
53        echo "<TR class='aaa'>";
54        echo "<TD>" . $data1[1];
55        echo "</TD>";
56    
57        echo "<TD>" . $data1[2];
58        echo "</TD>";
59      
60        echo "<TD>" . $data1[3];
61        echo "</TD>";
62    
63        echo "<TD>" . $data1[4];
64        echo "</TD>";
65    
66        echo "<TD>" . $data1[5];
67        echo "</TD>";
68    
69        echo "<TD>" . $data1[6];
70        echo "</TD>";
71
72        echo '<TD><img src="img/', $data1[8], '"></TD>';
73        echo "</TR>";
74}
75    echo "<TR id='bbb'>";
76    while ($data2 = mysql_fetch_array($quryset2)){
77        echo "<TD>" . $data2[1];
78        echo "</TD>";
79    
80        echo "<TD>" . $data2[2];
81        echo "</TD>";
82      
83        echo "<TD>" . $data2[3];
84        echo "</TD>";
85    
86        echo "<TD>" . $data2[4];
87        echo "</TD>";
88    
89        echo "<TD>" . $data2[5];
90        echo "</TD>";
91    
92        echo "<TD>" . $data2[6];
93        echo "</TD>";
94
95        echo '<TD><img src="img/', $data2[8], '"></TD>';
96        echo "</TR>";
97}
98        echo "<TR id='ccc'>";
99    while ($data3 = mysql_fetch_array($quryset3)){
100        echo "<TD>" . $data3[1];
101        echo "</TD>";
102    
103        echo "<TD>" . $data3[2];
104        echo "</TD>";
105      
106        echo "<TD>" . $data3[3];
107        echo "</TD>";
108    
109        echo "<TD>" . $data3[4];
110        echo "</TD>";
111    
112        echo "<TD>" . $data3[5];
113        echo "</TD>";
114    
115        echo "<TD>" . $data3[6];
116        echo "</TD>";
117
118        echo '<TD><img src="img/', $data3[8], '"></TD>';
119        echo "</TR>";
120}
121echo "</table>";
122        //var_dump($val);
123?>
124        </form>
125    </body>
126
127    </html>

javascript
1function select() {
2    var sel = document.getElementById("sel").selectedIndex;
3    if (sel == "hoge") {
4        var index = document.getElementsByClassName('aaa');
5        for (var i = 0; i < index.length; i++) {
6            index[i].style.display = "block"; 
7        }
8    } else {
9        var index = document.getElementsByClassName('aaa');
10        for (var i = 0; i < index.length; i++) {
11            index[i].style.display = "none";
12        }
13    }
14}

上記で実行すると、カテゴリテーブルのデータが全て表示されます。
セレクトボックスの値が「hoge」のとき、displayがblockになり表示され、セレクトボックスで「hoge」を選んでいないときはカテゴリーaaaのテーブルは全て消える想定です。
しかし、セレクトボックスのonchangeでfunctionは実行されるのですが、「hoge」を選んでいないときにカテゴリーaaaの項目は消えますが、「hoge」にしても再度表示されません。
index[i].style.display = ""; にしても表示はされませんでした。
自分の予想では、sel == "hoge"の判定が必ずelseになるので、まともにid("sel")の値が正常に取得できていないのだと思います。
しかし、原因特定することができず、困っています。
画面遷移を行えば簡単に解決する話ですが、javascriptを使ってソートを行いたいです。
不足している情報などありましたら、追記いたします。
こんな方法のほうがいいよ、やifで判定できていない原因と"block"で再表示されない原因などご存知の方いらっしゃればご教示いただけると助かります。
申し訳御座いませんが宜しくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

selに入るのはselectedIndexなのでhogeを選んでも0にしかならないですね
またテーブルの行のdisplayはblockじゃないほうがよいでしょう。
今回の命題にDBは関係ないので、なるべく簡潔に問題点を整理したほうがよいでしょう

HTML
1<script>
2function select() {
3  var sel = document.getElementById("sel").options[document.getElementById("sel").selectedIndex].value;
4  var index = document.getElementsByClassName('aaa');
5  for (var i = 0; i < index.length; i++) {
6    index[i].style.display = (sel == "hoge")?"table-row":"none"; 
7  }
8}
9</script>
10<select name="sel" id="sel" onchange="select()">
11<option value="hoge">hoge</option>
12<option value="fuga">fuga</option>
13<option value="puga">puga</option>
14</select>
15<table>
16<tr class="aaa"><td>aaa</td></tr>
17<tr class="bbb"><td>bbb</td></tr>
18<tr class="ccc"><td>ccc</td></tr>
19<tr class="aaa"><td>aaa</td></tr>
20<tr class="bbb"><td>bbb</td></tr>
21<tr class="ccc"><td>ccc</td></tr>
22</table>

投稿2016/12/08 00:34

yambejp

総合スコア114777

sori-

2016/12/08 05:04

ご回答いただきありがとうございます！ selectedIndexをなんとなくでつかっていたのが盲点でした。0.1.2のように取得してしまうんですね。。テーブルの件も教えていただいた記述をすれば無事表示されました！たしかに今回はDBの値をhtmlで表出しているだけなので関係がありませんでした。以後気をつけます。本当にありがとうございました。

行動規範の内容に同意します