javascript - jquery 在 chrome、mozilla 和 IE 中工作,但不能在 safari 中工作
问题描述
我的页面中有以下 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 中不起作用的建议吗?或者还有什么其他方法可以实现这一目标?任何帮助将不胜感激。
解决方案
尝试像这样将您的代码包装在文档就绪函数中。一旦 DOM 准备好,最终将绑定事件以桥接所有 input[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);
});