在 jquery 中使用 onChange 进行菜单选择

Question

我下面的代码工作正常，用于用动态<options> 填充<select> 项目 问题是说我最终得到 3 <options> 说：一/二/三然后我选择第一个 <option> 以便我可以调用 jquery 代码来填充下一个菜单。其中一个已经是菜单中的<selected> 项，因此它不会被识别为 onChange 事件。

所以我需要先选择二然后选择一来调用 onChange for One。

我应该使用什么来代替 onChange？或者我应该输入一个空白的<option> 项目作为默认值？所以总会有变化？

//if the job menu is changed
$('#job').change (function () 
{

    $.get('ajax/employee_menu.php', { job: $('#job').val() },      
    function(data) 
    {
        //load the <options> into the element
        $("#employee").html( data );
        // show the menu once loaded
        $("#employee").css({ "display" : "inline" });
     });
});

Answer 1

事实上，我上周正在处理的一个页面上遇到了同样的问题。我分离了 onChange 函数并在 document.ready 上调用，这样它就可以立即使用 First 选定的值调用。

$(function()
{
    ChangeFunction();
});

$('#job').change(ChangeFunction);

function ChangeFunction()
{
    $.get('ajax/employee_menu.php', { job: $('#job').val() },      
    function(data) 
    {
        //load the <options> into the element
        $("#employee").html( data );
        // show the menu once loaded
        $("#employee").css({ "display" : "inline" });
    });
}

Answer 2

不同的浏览器对<select /> 元素事件提供不同的支持。您可以使用 onclick 事件，但它仅在 Firefox 中完全受支持。其他浏览器不支持。

您最好使用onchange 事件并提供默认选项。或者，您可以使用 jQuery 将 <select /> 标记更改为纯粹基于 HTML 的组合框，就像在这个 jquery.combobox 插件中一样。这可能更适合您的目的。

目前，下拉菜单对标准事件没有任何接近一致的支持（不幸的是，过去几年也没有）。

Answer 3

您可以使用 PHP 预填充第二个选择，因此页面也使用 OPTION 元素呈现第二个选择。反正我就是这么做的。