把上面第2和第3步的代码写个例子
时间: 2024-02-17 09:04:39 浏览: 57
android 安卓经典代码例子25个合集.zip
好的,以下是一个使用 jQuery 实现根据所选部门限定职位的例子:
HTML 代码:
```
<form>
<label for="department">部门:</label>
<select id="department" name="department">
<option value="">请选择部门</option>
</select>
<br>
<label for="position">职位:</label>
<select id="position" name="position">
<option value="">请选择职位</option>
</select>
</form>
```
jQuery 代码:
```
$(document).ready(function() {
// 获取部门列表
$.ajax({
url: 'get_department_list.php',
type: 'GET',
dataType: 'json',
success: function(data) {
// 将部门列表填充到下拉框中
var departmentSelect = $('#department');
departmentSelect.empty();
departmentSelect.append('<option value="">请选择部门</option>');
$.each(data, function(key, value) {
departmentSelect.append('<option value="' + value.id + '">' + value.name + '</option>');
});
},
error: function(xhr, status, error) {
console.log('获取部门列表失败:' + error);
}
});
// 监听部门下拉框的变化
$('#department').change(function() {
var departmentId = $(this).val();
if (departmentId) {
// 根据部门ID获取职位列表
$.ajax({
url: 'get_position_list.php',
type: 'GET',
data: { department_id: departmentId },
dataType: 'json',
success: function(data) {
// 将职位列表填充到下拉框中
var positionSelect = $('#position');
positionSelect.empty();
positionSelect.append('<option value="">请选择职位</option>');
$.each(data, function(key, value) {
positionSelect.append('<option value="' + value.id + '">' + value.name + '</option>');
});
},
error: function(xhr, status, error) {
console.log('获取职位列表失败:' + error);
}
});
} else {
// 如果部门下拉框选择了“请选择部门”,则清空职位下拉框
var positionSelect = $('#position');
positionSelect.empty();
positionSelect.append('<option value="">请选择职位</option>');
}
});
});
```
在上面的代码中,我们使用 jQuery 的 `$.ajax` 方法来获取部门列表和职位列表,并使用 `$.each` 方法将列表数据填充到下拉框中。同时,我们使用 `change` 事件监听器来监听部门下拉框的变化,当部门下拉框的值发生变化时,根据所选部门获取对应的职位列表,并将职位列表填充到职位下拉框中。
阅读全文