jquery 在 chrome、mozilla 和 IE 中工作，但不能在 safari 中工作答案

【问题标题】：jquery working in chrome, mozilla and IE but not in safarijquery 在 chrome、mozilla 和 IE 中工作，但不能在 safari 中工作
【发布时间】：2019-12-06 20:45:37
【问题描述】：

我的页面中有以下 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 中的“Select Group”值在更改“Bridges”值后没有改变。你能给我任何关于上述代码在 safari 中不起作用的建议吗？或者还有什么其他方法可以实现这一目标？任何帮助将不胜感激。

【问题讨论】：

控制台有错误吗？
no...一个字体错误是...资源被解释为字体但使用 MIME 类型 font/woff 传输。
这里有相当多的代码。尝试将其减少到 minimal reproducible example
@Quentin 我把它最小化了。
您的问题与简单的 HTML 和 JS 有关，因此请尝试将模板占位符消除到文档中呈现的许多 HTML 选择选项中，并尝试准确描述您愿意看到的内容更改单选按钮输入。

标签： javascript jquery

【解决方案1】：

尝试像这样将您的代码包装在文档就绪函数中。一旦 DOM 准备好，最终将绑定事件以桥接所有输入[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);
});

【讨论】：

【解决方案2】：

您的问题在于 html 标记

<label> 是正确的标签而不是 <lable> 把 checked =

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

改成

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

那些服务器端标签是什么

【讨论】：

【解决方案3】：

我发现不是 $('elem').show() 和 $('elem').hide() 尝试使用...

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

在 CSS 中添加...

属性选择器使用了两次以增加特异性；）

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

【讨论】：