前端有两个select标签，其中公司的select标签根据后端返回的数据，生成option
<li><span>公司：</span><select name="p_company">
<option value=""></option>
{% for id,name in company_data.items %}
<option value="{{ id }}">{{ name }}</option>
{% endfor %}
</select><span class="must">*</span></li>
<li><span>项目：</span><select name="c_project">
<option value=""></option>
</select><span class="must">*</span></li>
为了让项目的select标签下的option根据所选的公司联动，添加了一个change()监听事件
$(function () {
function get_project(p_company_id) {
let url = $('#get_project_data').attr('src');
let data = {
'p_company_id': p_company_id,
};
let $select = $("select[name='c_project']");
$select.empty();
$select.append('<option></option>');
$.getJSON(url, data, function (result) {
for (let i = 0; i < result.data.length; i++) {
let p_name = result.data[i][2];
let p_id = result.data[i][9];
$select.append('<option></option>');
let $new = $("select[name='c_project'] option:last-child");
$new.attr('value', p_id);
$new.text(p_name);
}
});
}
$("select[name='p_company']").change(function () {
get_project($(this).val());
});
});
另外页面上有个按钮<a id="updata"><li>修改</li></a>，绑定了点击事件，点击后向服务器请求公司及项目和其他信息，但是页面上仅能正常显示公司，无法正常显示项目
$('.menu #update').click(function (event) {
if ($("#content-main tr[selected='selected']").length > 0) {
$('.background').show();
$('.detail h4').text('修改数据'); //显示详细页面
let id = $("#content-main tr[selected='selected'] th:last-child").text(); //表格最后后一行为该数据在数据库中的id，隐藏
console.log(id);
let book = $('div.header a[selected="selected"]').attr('id');
console.log(book); //获取数据在database中的id号，以及操作的表格
$("div.content input[name='id']").val(id);
$("div.content input[name='book']").val(book);
let href = $(this).attr('href');
console.log(href);
$.ajax({
url: href,
async: false,
type: "GET",
dataType: 'text',
data: {
'id': id,
'book': book,
},
success: function (result) {
let data = JSON.parse(result);
console.log(data);
$("input[type='checkbox']").val(true) //checkbox默认值为true
for (let key in data) {
console.log(key);
console.log(data[key]);
let $target = $("div.content *[name='" + key + "'][type!='checkbox']")
if (data[key] === true || data[key] === false) {
$target.val(String(data[key]));
} else {
$target.val(data[key]);
}
}
$('.detail').show();
}
});
} else {
alert('请选择需要修改的数据'); //没有选中行时提示
}
event.preventDefault(); //取消默认动作，避免点击链接事件
});
加载完如图
考虑到可能是jquery赋值无法触发change()事件，在for循环中添加$target.tigger("change")，但是仅仅是select菜单中添加了选项，但是依然无法将值正确的赋给select选项框。
为了了解原因，我在$('.detail').show()前增加一个打印console.log($("select[name='c_project']").children().length)，发现结果是1，应该就是这个selelct标签下最初有的空option
想请教各位大神，要怎么解决项目无法正常显示的问题
