Question

测试我的HTML5应用程序我遇到了以下问题：

当我的app完成加载时，执行以下jquery函数

// Sets the Dropdownvalue and sliders according to the values in the local storage
function setDropdownAndSliders() {
    // Set the filters to localally stored values
    var minAge = getItem("minAge");
    var maxAge = getItem("maxAge");
    var gend   = getItem("showGend");
    var orient = getItem("showOrient");
    var verf   = getItem("verf");

    // FILTER SETTINGS
    $("#filterGender").val(gend).change();
    $("#filterOrient").val(orient).change();
    $("#verified").val(verf).change();
    $("#settings").page();
    $("#rangeMin").val(minAge);
    $("#rangeMax").val(maxAge);
    $("#rangeMin").slider('refresh');
    $("#rangeMax").slider('refresh');
}

此功能的作用是将某些<select>元素的选定值设置为存储在本地存储中的值。（函数getItem(string)也由我编写，用于访问本地存储值）

现在html元素看起来像这样：

<select name="filterGender" id="filterGender" onchange="onChangeGender()">
  <option value="male">Male</option>
  <option value="female">Female</option>
  <option value="both">Both</option>
</select>

我的问题：

每次执行函数setDropdownAndSliders()并且<select>的值设置为存储在LocalStorage中的值时，<select>元素的onchange Handler将被触发并执行其他函数，只有在用户手动更改下拉菜单时才会触发。

在某些情况下，执行函数甚至会调用Ajax调用，这显然会导致加载Web应用程序时出现不必要的加载时间。

我如何更改代码，以便在通过jquery更改<select>元素的值时不调用onchange函数？

Answer 1

尝试删除.change（）;在命令的最后：

取代：

<div class="btn-group btn-group-justified blocks" data-toggle="buttons">
    <label class="btn">
    <a class="btndrp" href="#" data-toggle="dropdown"><span class="img-nav"><i class="fa fa-shopping-cart"></i></span><p class="img-text">View Cart</p><span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="secondli"><a href="www.domain.com/test"><i class="fa fa-cart-plus"></i> View Cart</a></li>
            <li class="secondli"><a href="www.domain.com/test"><i class="fa fa-cart-arrow-down"></i> Checkout Now</a></li>
        </ul>                      
    </label>
</div>

由：

$("#filterGender").val(gend).change();

Answer 2

在修改每个元素之前，请禁用它们：

document.getElementById("filterGender").disabled = true;

最后，启用它们：

document.getElementById("filterGender").disabled = false;

通过jquery设置值时会触发onchange函数

2 个答案: