回答編集履歴
1
追記
answer
CHANGED
|
@@ -77,4 +77,92 @@
|
|
|
77
77
|
</tbody>
|
|
78
78
|
</table>
|
|
79
79
|
</div>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
# クリアと該当なし
|
|
83
|
+
クリアと該当なしを付けるの忘れてました
|
|
84
|
+
```javascript
|
|
85
|
+
$(function(){
|
|
86
|
+
$('#1-select,.checkbox-input,#3-select').on('change',function(){
|
|
87
|
+
var area=$('#1-select').val();
|
|
88
|
+
var city=[];
|
|
89
|
+
$('.checkbox-input:checked').each(function(){city.push($(this).val())});
|
|
90
|
+
var brand=$('#3-select').val();
|
|
91
|
+
$('#err').remove();
|
|
92
|
+
if(area=="" && city.length==0 && brand==""){
|
|
93
|
+
$('#store-data table tr').show();
|
|
94
|
+
}else{
|
|
95
|
+
var tr=$('#store-data table tr').hide().filter(function(){
|
|
96
|
+
return area==""?true:$(this).has("."+area).length>0;
|
|
97
|
+
}).filter(function(){
|
|
98
|
+
return brand==""?true:$(this).has("."+brand).length>0;
|
|
99
|
+
}).filter(function(){
|
|
100
|
+
return city.length==0?true:$(this).has("."+city.join(",.")).length>0;
|
|
101
|
+
}).show();
|
|
102
|
+
if(tr.length==0){
|
|
103
|
+
$("#store-data table").after($('<div>').attr('id','err').text("該当なし"));
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}).eq(0).trigger('change');
|
|
107
|
+
$('#reset').on('click',function(e){
|
|
108
|
+
$('#1-select').prop('selectedIndex',0);
|
|
109
|
+
$('.checkbox-input').prop('checked',false);
|
|
110
|
+
$('#3-select').prop('selectedIndex',0).trigger('change');
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
```HTML
|
|
116
|
+
<div id="search-bx">
|
|
117
|
+
<select id="1-select" class="store-select" name="area">
|
|
118
|
+
<option value="">地域から検索</option>
|
|
119
|
+
<option value="1-area">1-地域</option>
|
|
120
|
+
<option value="2-area">2-地域</option>
|
|
121
|
+
<option value="3-area">3-地域</option>
|
|
122
|
+
</select>
|
|
123
|
+
|
|
124
|
+
<div id="2-checkbox">
|
|
125
|
+
<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
|
|
126
|
+
<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
|
|
127
|
+
<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<select id="3-select" class="store-select" name="brand">
|
|
131
|
+
<option value="">ブランド検索</option>
|
|
132
|
+
<option value="1-brand">1-ブランド</option>
|
|
133
|
+
<option value="2-brand">2-ブランド</option>
|
|
134
|
+
<option value="3-brand">3-ブランド</option>
|
|
135
|
+
</select>
|
|
136
|
+
|
|
137
|
+
<input type="button" id="reset" value="選択をクリアする">
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div id="store-data">
|
|
141
|
+
<table>
|
|
142
|
+
<thead>
|
|
143
|
+
<tr class="active">
|
|
144
|
+
<td>地域</td>
|
|
145
|
+
<td>都市</td>
|
|
146
|
+
<td>ブランド</td>
|
|
147
|
+
</tr>
|
|
148
|
+
</thead>
|
|
149
|
+
<tbody>
|
|
150
|
+
<tr>
|
|
151
|
+
<td class="area"><span class="1-area">1-地域</span></td>
|
|
152
|
+
<td class="city"><span class="1-city">1-都市</span></td>
|
|
153
|
+
<td class="brand"><span class="1-brand">1-ブランド</span></td>
|
|
154
|
+
</tr>
|
|
155
|
+
<tr>
|
|
156
|
+
<td class="area"><span class="1-area">1-地域</span></td>
|
|
157
|
+
<td class="city"><span class="2-city">2-都市</span></td>
|
|
158
|
+
<td class="brand"><span class="2-brand">2-ブランド</span></td>
|
|
159
|
+
</tr>
|
|
160
|
+
<tr>
|
|
161
|
+
<td class="area"><span class="1-area">1-地域</span></td>
|
|
162
|
+
<td class="city"><span class="3-city">3-都市</span></td>
|
|
163
|
+
<td class="brand"><span class="3-brand">3-ブランド</span></td>
|
|
164
|
+
</tr>
|
|
165
|
+
</tbody>
|
|
166
|
+
</table>
|
|
167
|
+
</div>
|
|
80
168
|
```
|