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“Select Group”值改變“Bridges”值后沒有改變。 你能否給我一些關於上述代碼中沒有在safari中工作的建議？ 或者實現這個目標的另一種方法是什么？ 任何幫助將不勝感激。

Answer 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上找到輸入[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);
});

Answer 2

你的問題是在HTML標簽

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

改為

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

什么是服務器端標簽

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