Question

得到了这个函数，为了简化它，启用并填充下一个下拉列表（它调用另一个jQuery函数，但暂不发布它）。它完美地运作。现在我正在尝试传递默认值，并启用并填充以下下拉列表而不实际点击任何内容。

目前有效的功能：

$(function() {
    $(document).on('change', '.update', function() {
    formObject.run($(this));
    });
});

这里使用了'change'事件，因为当页面加载时，除了第一个列表之外的所有列表都被禁用，因此第一个列表中的更改（选择任何项目）将启用第二个列表，稍后选择第二个列表将启用第三个列表。 formObjet是一个变量，它包含一个执行所有“脏工作”的函数“run”。

现在，我读过（已经浏览了几个小时！）你可以调用更改事件或触发器处理程序来模仿这样的选择，但到目前为止还没有工作：

$('select[name="princ"]').change(); // DOES NOT WORK
$('select[name="princ"]').trigger('change'); // DOES NOT WORK EITHER

我已将此代码放在该函数之前，但之后似乎没有任何效果。 BTW，'princ'是第一个下拉列表，在页面加载时填充（不依赖于javascript来填充，只需php和mysql）

有什么建议吗？

Answer 1

根据您用于测试的浏览器，更改事件可能不会冒泡到文档级别： http://www.quirksmode.org/dom/events/change.html

您的示例在IE8及以下版本中无效。

Answer 2

如果我误解了这个问题，请告诉我，但我想我已经处理过类似的问题了。

浏览器都会以不同方式处理更改事件，并且通常在用户更新后点击该字段时才会触发（通过单击页面上的其他位置并固化其更改）。

我的解决方法是创建一个为我工作的功能，并让该功能在点击而不是更改时运行。为了覆盖你的基础（并且没有不必要的动态数据加载），我会这样做：

创建全局变量或对象以跟踪每个下拉列表的状态（您可以存储id，值等 - 这基本上可以让您检查下拉列表。对于默认状态，创建所有变量并将其值设置为空白）
创建一个函数，每次单击任何字段时都会运行该函数并传入下拉列表（通过ID，名称或实际的jQuery对象）

JavaScript部分

$(document).ready(function() {
    // Attach click function to princ
    $("select[name='princ']").click(function() {
        var value = $(this).val();  // Grab the value
        if (value != demo.globals.princ) {   // Check if the value is the old value
            demo.checkDropdown('princ', 'princ2', value);  // If it's a new value, grab the selected value and run the checkDropdown function
            demo.globals.princ = value;  // Set the global value
            $('#status').text("loading new values for princ " + value);
        } else {
            $('#status').text("princ values already loaded " + value);  // Unnecessary but used to output the status of the clicks
        }
    });
    // Attach click function to princ2
    $("select[name='princ2']").click(function() {
        var value = $(this).val();
        if (value != demo.globals.princ2) {
            demo.checkDropdown('princ2', 'princ3', value);
            demo.globals.princ2 = value;
            $('#status').text("loading new values for princ2 " + value);
        } else {
            $('#status').text("princ2 values already loaded " + value);
        }
    });
});
// Create a global object to avoid function collision
var demo = {};
// Create global variables
demo.globals = {
    princ: 0,
    princ2: 0
}
// Dropdown population function
demo.checkDropdown = function(dropDownName, nextDropDown, value) {
    // Check if it's already populated with the correct data, otherwise load it
    // You can also load dynamic data here via AJAX and update the select field
    var dropDownHtml = "<option value='1'>1</option>";
    dropDownHtml += "<option value='2'>2</option>";
    dropDownHtml += "<option value='3'>3</option>";
    $("select[name='" + nextDropDown + "']").html(dropDownHtml);
}

HTML

<body>
    <form>
        <div id="status">Page loaded</div>
        <select name="princ">
            <option value="0">Please select one</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <select name="princ2">
        </select>

        <select name="princ3">
        </select>

    </form>
</body>

我真的希望这会帮助你。这比你要求的要多一点，但它是一个完整的，有效的例子，说明如何在变化时获得下拉值。

jQuery无法使用代码来激活“更改”事件以进行模仿列表选择更改

2 个答案: