連動するセレクトを実装していますがiphone、サファリだと連動しません。

ネット上のソースを利用してます。
親カテゴリ‐を選択すると子カテゴリーの内容が厳選されて表示される仕様ですが
iphone、サファリだと厳選されずすべて表示されます。

原因がわかりません。

<form>
<!-- 親select -->
<select class="hierSelect" data-child=".child">
		<option value="">----</option>
		<option value="1">グループ1</option>
		<option value="2">グループ2</option>
		<option value="3">グループ3</option>
</select>
<!-- 子select1 -->
<select class="child">
		<option value="">----</option>
		<option value="1" data-parent="1">サンプル111</option>
		<option value="2" data-parent="1">サンプル112</option>
		<option value="3" data-parent="1">サンプル113</option>
		<option value="4" data-parent="2">サンプル121</option>
		<option value="5" data-parent="2">サンプル122</option>
		<option value="6" data-parent="2">サンプル123</option>
		<option value="7" data-parent="3">サンプル131</option>
		<option value="8" data-parent="3">サンプル132</option>
		<option value="9" data-parent="3">サンプル133</option>
</select>
<!-- 子select2 -->
<select class="child">
		<option value="1" data-parent="1">サンプル211</option>
		<option value="2" data-parent="1">サンプル212</option>
		<option value="3" data-parent="1">サンプル213</option>
		<option value="4" data-parent="2">サンプル221</option>
		<option value="5" data-parent="2">サンプル222</option>
		<option value="6" data-parent="2">サンプル223</option>
		<option value="7" data-parent="3">サンプル231</option>
		<option value="8" data-parent="3">サンプル232</option>
		<option value="9" data-parent="3">サンプル233</option>
</select>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
	$('.hierSelect').on('change', function() {
		var selected = $(this).val();
		$($(this).data('child')).each(function(i,childSelect){
			$(childSelect).find('option').each(function(j,childOption) {
				if(selected.length == 0 || $(childOption).data('parent') == selected) {
					$(childOption).show();
				} else {
					$(childOption).hide();
				}
			});
		});
	});
	$('.hierSelect').trigger('change');
});
</script>

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

回答1件

ベストアンサー

こんな感じでしょうか？

javascript
1<script>
2$(function() {
3  $('.hierSelect').on('change', function() {
4    $('.child').find('option:not([value=""])').hide();
5    var selected=$(this).val();
6    $($(this).data('child')).find('option').filter(function(){return $(this).data('parent')==selected;}).show();
7  }).trigger('change');
8});
9</script>
10<form>
11<!-- 親select -->
12<select class="hierSelect" data-child=".child">
13        <option value="">----</option>
14        <option value="1">グループ1</option>
15        <option value="2">グループ2</option>
16        <option value="3">グループ3</option>
17</select>
18<!-- 子select1 -->
19<select class="child">
20        <option value="">----</option>
21        <option value="1" data-parent="1">サンプル111</option>
22        <option value="2" data-parent="1">サンプル112</option>
23        <option value="3" data-parent="1">サンプル113</option>
24        <option value="4" data-parent="2">サンプル121</option>
25        <option value="5" data-parent="2">サンプル122</option>
26        <option value="6" data-parent="2">サンプル123</option>
27        <option value="7" data-parent="3">サンプル131</option>
28        <option value="8" data-parent="3">サンプル132</option>
29        <option value="9" data-parent="3">サンプル133</option>
30</select>
31<!-- 子select2 -->
32<select class="child">
33        <option value="">----</option>
34        <option value="1" data-parent="1">サンプル211</option>
35        <option value="2" data-parent="1">サンプル212</option>
36        <option value="3" data-parent="1">サンプル213</option>
37        <option value="4" data-parent="2">サンプル221</option>
38        <option value="5" data-parent="2">サンプル222</option>
39        <option value="6" data-parent="2">サンプル223</option>
40        <option value="7" data-parent="3">サンプル231</option>
41        <option value="8" data-parent="3">サンプル232</option>
42        <option value="9" data-parent="3">サンプル233</option>
43</select>
44</form>
45