【发布时间】：2015-12-22 14:05:44
【问题描述】：
我有一个带有 2 个下拉框的表单。第一个框的选择会影响第二个框的输出。 jQuery 在 chrome 和 firefox 中工作，但我不知道为什么它在 safari 中不起作用。
我发现该功能最初是在页面加载时触发的，但它不会影响选择标签或之后触发。
我知道一定有问题，否则它会起作用。但这似乎是特定于野生动物园的。由于我只是使用 jQuery 的新手，我为这个模糊的问题道歉，但我最近几天一直在试图解决这个问题。
我的问题是什么问题？
safari 的版本是 9。
这是最初被触发但不会在之后触发或影响表单的功能。
$(function(){
$("#groups").on('change', function(){
var val = $(this).val();
var sub = $("#sub_groups");
$("option", sub).filter(function(){
if (
$(this).attr("data-group") === val
|| $(this).attr("data-group") === "SHOW"
) {
$(this).show();
} else {
$(this).hide();
}
});
});
$("#groups").trigger('change');
});
这是它应该影响的表
<table id="quote_form_table"border="1" style="border-collapse:collapse;border:1px solid #000000;width:100%" cellpadding="3" cellspacing="3">
<tr>
<th class="quantitiyH">Quantity</th>
<th class="other">Item</th>
<th class="other">Unit Type</th>
</tr>
<tr>
<td class="hidden"><input type="text" name="H1" value="active"></td>
<td><input class="input " type="number" name="Q1" min="1" max="200"></td>
<td><select name="P1" id="groups">
<option value="none">None</option>
<option value="Health & Safety Signs">Health & Safety Signs</option>
<option value="Portable Displays & Counters">Portable Displays & Counters</option>
<option value="Roller Banner">Roller Banner</option>
<option value="Canvas Printing">Canvas Printing</option>
<option value="Exterior Signs">Exterior Signs</option>
<option value="Exibition Design & Instalation">Exibition Design & Insalation</option>
</select>
</td>
<td>
<select name="T1" id="sub_groups" >
<option data-group='SHOW' value='0'>-- Select --</option>
<option data-group='Health & Safety Signs' value='Di Bond'>Di Bond</option>
<option data-group='Health & Safety Signs' value='PVC'>PVC</option>
<option data-group='Health & Safety Signs' value='Self Adhesive'>Self Adhesive</option>
<option data-group='Health & Safety Signs' value='Floor Vinyls'>Floor Vinyls</option>
<option data-group='Portable Displays & Counters' value='Pop up Display'>Pop up Display</option>
<option data-group='Portable Displays & Counters' value='Table & Case to counter'>Table & Case to counter</option>
<option data-group='Portable Displays & Counters' value='Replacement Graphics'>Replacement Graphics</option>
<option data-group='Roller Banner' value='Grass Hopper'>Grass Hopper</option>
<option data-group='Roller Banner' value='Excalibur'>Excalibur</option>
<option data-group='Roller Banner' value='Replacement Graphics'>Replacement Graphics</option>
<option data-group='Canvas Printing' value='Standard'>Standard</option>
<option data-group='Canvas Printing' value='Waterproof Latex'>Waterproof latex</option>
<option data-group='Canvas Printing' value='Photo Realistic'>Photo Realistic</option>
<option data-group='Exterior Signs' value='Full Color'>Full Color</option>
<option data-group='Exterior Signs' value='Vinyl Cut'>Vinyl Cut</option>
<option data-group='Exterior Signs' value='Gloss Laminate'>Gloss Laminate</option>
<option data-group="Exibition Design & Instalation" value='Standard'>Standard</option>
</select>
</td>
</tr>
</table>
<br>
<button type="button"onclick="addrow()">Add Row</button>
<button type="button"onclick="removerow()">Remove Row</button>
我知道内联 CSS 和使用 ID 不是最好的，我会在之后整理它们。
编辑 -- 仅显示错误消息用于 css * 选择器
编辑——console.log
$(function(){
console.log(1);
$("#groups").on('change', function(){
console.log(2);
var val = $(this).val();
console.log(3);
var sub = $("#sub_groups");
console.log(4);
$("option", sub).filter(function(){
if (
$(this).attr("data-group") === val
|| $(this).attr("data-group") === "SHOW"
) {
console.log(5);
$(this).show();
} else { console.log(6);
$(this).hide();
}
console.log(7);
});
});
console.log(8);
$("#groups").trigger('change');
console.log(9);
});
【问题讨论】：
-
您在浏览器控制台中遇到什么错误？
-
您检查的是哪个操作系统？
-
我在 safari 中使用错误控制台发现的唯一错误是 css 错误。哪个是 * 选择器。没有出现其他错误。
-
我目前使用的是 OS X El Capitan 10.11 版。
-
是的，EL Captain MAC 的一些 jquery 问题