javascript - 更改下拉列表的 "Selected"属性无法正常工作

Question

我在表单中有一个下拉列表，其中的 onchange 事件由 jquery 获取监听并导致 AJAX 调用。之后 Jquery 只是根据服务器的回答设置/删除 selected 属性:

$( document ).ready(function(){
    $("#user_select").on("change", function(){
        var value = $("#user_select").val();
        $.ajax({
            url: "../ajax/change_permission.php",
            method: "POST",
            data: { user_id: value }
        }).done(function(data){
            var i = 0;
            while(i < 4){
                $("#perm_"+i).attr("selected", false);
                $("#perm_"+i).removeClass("active_perm");
                i++;
            }
            $("#perm_"+data).attr("selected", true);
            $("#perm_"+data).addClass("active_perm");
        });
    });
});

在我的 user_select 下拉列表中是我的用户，如果我选择它，应该显示他们的权限。表单(选择应设置为)如下所示:

<select id="user_permission" class="form-control">
    <option id="perm_0" value="0">Berechtigungsstufe</option>
    <option id="perm_1" value="1">Administrator</option>
    <option id="perm_2" value="2">Super-User</option>
    <option id="perm_3" value="3">User</option>
</select>

现在的问题是，如果一个选项已经被选中一次，它就不能再被设置为激活状态，或者更好地说，选中的标签仍然被应用到选项上，但它不再改变(只是停留在选项零)。在我选择了每个选项一次之后，选择看起来像这样:

<select id="user_permission" class="form-control">
    <option id="perm_0" value="0">Berechtigungsstufe</option>
    <option id="perm_1" value="1" class="">Administrator</option>
    <option id="perm_2" value="2" class="">Super-User</option>
    <option id="perm_3" value="3" class="">User</option>
</select>

selected="selected" 属性仍然应用于该选项，但所选选项不会再更改(显示不会更改)。已经认为它是因为类标签为空而出现错误，但如果我删除它，它不会有任何改变。

有人知道是什么导致了这个问题吗？

编辑:总而言之就是JSfiddle只是没有随机值 :p

编辑答案:Jquery“.attr”在 Firefox 42.0 中无法正常工作。相反，我使用了“.prop”，它工作正常。

Answer 1

Jquery 有两个不同的函数attr() 和prop()。这两个用于不同的目的。 attr 适用于所有属性。 prop 用于属性。在您的情况下，下拉元素“selected”不是属性。这是一个属性。因此，您应该使用如下的 prop 函数。

$("#perm_"+data).prop("selected", true);

注意:然而，一些现代浏览器同时适用于这两种浏览器，但为了跨浏览器兼容性，请始终尝试使用正确的浏览器。