Menu
I have a form with 2 drop down boxes. The selection of the first box affects the output of the second box. The jQuery works in chrome and firefox but I do not have a clue why it doesn't work in safari.
I have worked out that the function is being triggered initially when the page is loaded however it is not affecting the select tags or being triggered afterwards.
I know something must be wrong otherwise it would be working. But it seems to be safari specific. As I only new to using jQuery I apologise for the vague question but i've spent the last few days trying to figure this out.
My question is what wrong?
The version of safari is 9.
This is the function that is being triggered initially but not afterwards or affecting the form.
$(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');
});
Here is the table it should be affecting
<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>
I do know that inline css and using IDs are not the best and I will be tidying them up afterwards.
EDIT -- Only error messages showing are for css * selector
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);
});
609
asked Mar 03 '26 18:03
I have made smoe changes in your function and thats works fine.
$(function() {
var removedElement="";
$("#groups").change(function() {
$("#sub_groups").append(removedElement);
var val = $(this).val();
removedElement = $("#sub_groups option").filter(function(i) {
return (!($(this).data("group") == val || $(this).data("group") == "SHOW"));
}).remove();
});
});<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
