[英]jquery working in chrome, mozilla and IE but not in safari
I have the following HTML code in my page. 我的页面中有以下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>
and have following Jquery code in my page for dynamically changing dropdown value change. 并在我的页面中有以下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);
});
I want different "Select Group" dropdown for changing Bridges value. 我想要不同的“选择组”下拉菜单来更改Bridges值。 all the things working fine in chrome, Mozilla and IE but in safari "Select Group" value not changing after changing "Bridges" value.
所有的东西在chrome,Mozilla和IE中运行良好,但在safari“Select Group”值改变“Bridges”值后没有改变。 can you give me any suggestion for what is not working in safari in above code?
你能否给我一些关于上述代码中没有在safari中工作的建议? or what are the other way to achieve this?
或者实现这个目标的另一种方法是什么? any help will be appreciated.
任何帮助将不胜感激。
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.
一旦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);
});
});
If you are creating dynamic elements use below code that will find for the input[type=radio][name=bridge] on DOM. 如果要创建动态元素,请使用下面的代码,该代码将在DOM上找到输入[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);
});
your issue is in html tags 你的问题是在HTML标签
<label>
is right tag not <lable>
put checked = <label>
是正确的标签而不是<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 什么是服务器端标签
I find Instead of $('elem').show() and $('elem').hide() try using... 我发现而不是$('elem')。show()和$('elem')。hide()尝试使用...
$('elem').attr( 'data-display', 'block');
$('elem').attr( 'data-display', 'none');
In CSS add... 在CSS中添加...
Attribute selector used twice to increase specificity ;) 属性选择器使用两次以增加特异性;)
[data-display][data-display='none'] {
display:none!important;
}
[data-display][data-display='block'] {
display:block!important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.