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.

Answer 1

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);
});

Answer 2

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

Answer 3

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;
}