1

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

当前有效的功能：

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

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

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

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

我已经把这段代码剪断在函数之前，之后，但似乎没有任何效果。顺便说一句，'princ' 是第一个下拉列表，在页面加载时填充（不依赖于要填充的 javascript，只需 php 和 mysql）

有什么建议么？

4

2 回答 2

0

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

您的示例不适用于 IE8 及以下版本。

于 2012-07-05T22:32:53.137 回答
0

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

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

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

  1. 创建全局变量或对象以跟踪每个下拉列表的状态（您可以存储 id、值等 - 这基本上允许您检查下拉列表。对于默认状态，创建所有变量并将其值设置为空白）
  2. 创建一个在每次单击任何字段时运行的函数并传入下拉列表（通过 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>

我真的希望这可以帮助你。它比您要求的要多一点，但它是一个完整的、有效的示例，说明了如何在更改时获取下拉值。

于 2012-07-06T00:17:35.807 回答