jquery working in chrome, mozilla and IE but not in safari

Question

I have the following HTML code in my page.

<div class="form-device">
    <label class="control-label col-lg-2">Bridges </label>
    <div class="col-md-4" style="font-size: 16px;">
        <div class="input-icon right">
            <div class="col-md-3" style="padding-left: 0;">
                <lable><input type="radio" name="bridge" value="default" <?if (!empty($device_info['bridge']) && $device_info['bridge']=='default') {echo "checked";}?>> Default</lable>
            </div>
            <div class="col-md-3" style="padding-left: 0;">
                <lable><input type="radio" name="bridge" value="2" <?if (!empty($device_info['bridge']) && $device_info['bridge']=='2') {echo "checked";}?>> 2</lable>
            </div>
            <div class="col-md-3" style="padding-left: 0;">
                <lable><input type="radio" name="bridge" value="3" <?if (!empty($device_info['bridge']) && $device_info['bridge']=='3') {echo "checked";}?>> 3</lable>
            </div>
            <div class="col-md-3" style="padding-left: 0;">
                <lable><input type="radio" name="bridge" value="4" <?if (!empty($device_info['bridge']) && $device_info['bridge']=='4') {echo "checked";}?>> 4</lable>
            </div>
        </div>
    </div>
</div>
<div class="clearfix"><br></div>
<div class="clearfix"><br></div>
<div class="form-device">
    <label class="control-label col-lg-2">Select Group</label>
    <div class="col-md-4">
        <div class="input-icon right">
            <select name="fk_group_id" class="select-basic form-control" id="fk_group_id" required="required">
                <option value="" data-target="always">Select Group</option>
                <?
                foreach ($group_list as $group_list_key => $group_list_value) {
                    if ($group_list_value['group_id']==$device_info['fk_group_id']) {
                        $selected='selected="selected"';
                    }
                    else{
                        $selected='';
                    }
                    ?>
                    <option value="<?=$group_list_value['group_id'];?>" data-target="<?=$group_list_value['bridge'];?>" <?=$selected;?> ><?=$group_list_value['group_name'];?></option>
                    <?
                }
                ?>
            </select>
        </div>
    </div>
</div>

and have following Jquery code in my page for dynamically changing dropdown value change.

$('input[type=radio][name=bridge]').change(function() {

    var val = $('input[type=radio][name=bridge]:checked').val();
    $('#fk_group_id>option[value]').hide();
    $('#fk_group_id>option[data-target=always]').show();
    $('#fk_group_id>option[data-target='+ val +']').show();
    $('#fk_group_id>option:eq(0)').prop('selected', true);
});

I want different "Select Group" dropdown for changing Bridges value. all the things working fine in chrome, Mozilla and IE but in safari "Select Group" value not changing after changing "Bridges" value. can you give me any suggestion for what is not working in safari in above code? or what are the other way to achieve this? any help will be appreciated.

no...one font error is...Resource interpreted as Font but transferred with MIME type font/woff. — Divyesh Jesadiya, Jul 29 '19 at 13:38
There's rather a lot of code here. Try reducing it to a [mcve] — Quentin, Aug 01 '19 at 14:22
Your question is related to simple HTML and JS, so please try to eliminate your template placeholders to a number of HTML select options that are rendered in document and try to describe exactly what you are willing to see by changing the radio button inputs. — Mohsen Taleb, Aug 02 '19 at 06:47
I find my answer on this https://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser and this https://stackoverflow.com/questions/15025555/option-style-display-none-not-working-in-safari — Divyesh Jesadiya, Aug 02 '19 at 11:11
If reducing your code helped you see the problem clearly which led you to the correct SO question, then @Quentin might worth the bounty ;) — Marinos An, Aug 06 '19 at 07:34
what is this tag in html ?? Is it same like this label>Male? — Jin Thakur, Aug 07 '19 at 16:05
https://stackoverflow.com/questions/45764703/jquery-change-function-not-working-in-safari-browser — flakerimi, Aug 08 '19 at 08:01
@DivyeshJesadiya — You can't. I didn't answer the question. — Quentin, Aug 09 '19 at 09:43

score 3 · Answer 1 · answered Aug 06 '19 at 11:38

Try wrapping your code in the document ready function like this. Which will eventually bind the events to bridge all input[type=radio][name=bridge] once DOM is ready.

$(document).ready(function(){

$('input[type=radio][name=bridge]').change(function() {
    var val = $('input[type=radio][name=bridge]:checked').val();
    $('#fk_group_id>option[value]').hide();
    $('#fk_group_id>option[data-target=always]').show();
    $('#fk_group_id>option[data-target='+ val +']').show();
    $('#fk_group_id>option:eq(0)').prop('selected', true);
});

});

If you are creating dynamic elements use below code that will find for the input[type=radio][name=bridge] on DOM.

$(document).on("change", "input[type=radio][name=bridge]", (function() {
    var val = $('input[type=radio][name=bridge]:checked').val();
    $('#fk_group_id>option[value]').hide();
    $('#fk_group_id>option[data-target=always]').show();
    $('#fk_group_id>option[data-target='+ val +']').show();
    $('#fk_group_id>option:eq(0)').prop('selected', true);
});

score 1 · Answer 2 · edited Aug 08 '19 at 12:18

your issue is in html tags

<label> is right tag not <lable> put checked =

<lable>
<input type="radio" name="bridge" value="2" <?if
   (!empty($device_info['bridge']) 
&& $device_info['bridge']=='2') {echo
   "checked";}?>> 2</lable>

change it to

<label>
<input type="radio" name="bridge"
     value="default" checked = "<?if (!empty($device_info['bridge']) 
    && $device_info['bridge']=='default') {echo 'checked';}?>" >
       Default
</label>

what are those server side tags

score 0 · Answer 3 · answered Aug 09 '19 at 09:36

I find Instead of $('elem').show() and $('elem').hide() try using...

$('elem').attr( 'data-display', 'block');
$('elem').attr( 'data-display', 'none');

In CSS add...

Attribute selector used twice to increase specificity ;)

[data-display][data-display='none'] {
  display:none!important;
}
[data-display][data-display='block'] {
  display:block!important;
}

jquery working in chrome, mozilla and IE but not in safari

3 Answers3