У меня есть форма с двумя выпадающими ящиками. Выбор первого окна влияет на вывод второго блока. JQuery работает в chrome и firefox, но у меня нет подсказки, почему он не работает в сафари.Safari не выполняет функцию jQuery
Я выяснил, что функция запускается первоначально при загрузке страницы, однако она не влияет на теги выбора или не запускается впоследствии.
Я знаю, что что-то должно быть неправильно, иначе оно будет работать. Но, похоже, это сафари. Поскольку я только новичок в использовании jQuery, я приношу свои извинения за неопределенный вопрос, но последние несколько дней я пытался выяснить это.
Мой вопрос в том, что не так?
Версия сафари 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 и использование идентификаторов не являются лучшими, и я буду их приведение в порядок впоследствии.
EDIT - сообщения только об ошибках, показывающие предназначены для CSS * селектор
EDIT - 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);
});
какая ошибка вы получаете в консоли браузера? –
В какой ОС вы проверяете? –
Единственные ошибки, которые я обнаружил, используя консоль ошибок в сафари, являются одними для css. Который является * селектором. Никаких других ошибок не возникает. –