Question

我在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>

在点击提交按钮后的上述表单中，javascript中的一些验证代码被执行，并且在验证之后，使用java脚本以编程方式提交表单。

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

请指导我的朋友解决这个问题。谢谢！

Answer 1

<强> HTML

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

<强>的jQuery

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");
            }
        });
}

Taken from here

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

1 个答案: