javascript - jquery 在 chrome、mozilla 和 IE 中工作，但在 safari 中不工作

Question

我的页面中有以下 HTML 代码。

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

并在我的页面中包含以下 Jquery 代码，用于动态更改下拉值更改。

$('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);
});

我想要不同的“选择组”下拉菜单来更改 Bridges 值。在 chrome、Mozilla 和 IE 中一切正常，但在 safari 中“选择组”值在更改“Bridges”值后没有改变。你能给我任何关于上面代码中 Safari 中不起作用的建议吗？或者实现这一目标的其他方法是什么？任何帮助将不胜感激。

Answer 1

尝试像这样将您的代码包装在文档就绪函数中。一旦 DOM 准备就绪，最终将绑定(bind)事件以桥接所有输入[type=radio][name=bridge]。

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

});

如果您要创建动态元素，请使用下面的代码来查找 DOM 上的 input[type=radio][name=bridge]。

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