Javascript 如何在另一个选择框的onchange事件中使用数据库中的值填充选择框，而不刷新页面或提交表单？_Javascript_Ajax_Jquery

Javascript 如何在另一个选择框的onchange事件中使用数据库中的值填充选择框，而不刷新页面或提交表单？

javascript ajax jquery

Javascript 如何在另一个选择框的onchange事件中使用数据库中的值填充选择框，而不刷新页面或提交表单？,javascript,ajax,jquery,Javascript,Ajax,Jquery,我有一个php页面中的html表单。演示代码如下所示 <html> <head> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Peter Griffin</

我有一个php页面中的html表单。演示代码如下所示

<html>
<head>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
<br>
<select name="job" >
</select>
<br>
<input name="salary" type="text">
<br>
<input name="Submit" type="submit" value="Submit">
</form>
<br>
</body>
</html>


选择一个人：
彼得·格里芬
路易斯·格里芬
格伦泥潭
约瑟夫·斯旺森

在上面的表单中，单击submit按钮后，将执行javascript中的一些验证代码，验证后，表单将使用java脚本以编程方式提交

当我从第一个选择框中选择一个值时，要求是；第二个选择框应填充一些值。第二个选择框中的这些值来自数据库。我对AJAX一无所知，但我想使用AJAX和javascript/jquery实现这一点，因为每当我从第一个选择框中选择任何值时，表单都不应该被提交，页面也不应该被刷新，只是第二个选择框中填充了来自数据库的新值

请引导我的朋友们解决这个问题。谢谢大家!

HTML

<select id="job" name="job" >
</select>

function showUser(value){

        $("#job").get(0).options.length = 0;
        $("#job").get(0).options[0] = new Option("Loading jobs", "-1"); 

        $.ajax({
            type: "POST",
            url: "Default.aspx/GetJobs",
            data: "{userID:" + value+ "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#job").get(0).options.length = 0;
                $("#job").get(0).options[0] = new Option("Select job", "-1"); 

                $.each(msg.d, function(index, item) {
                    $("#job").get(0).options[$("#job").get(0).options.length] = new Option(item.Display, item.Value);
                });
            },
            error: function() {
                $("#job").get(0).options.length = 0;
                alert("Failed to load jobs");
            }
        });
}