zhoujunfei1990
zhoujunfei1990
采纳率100%
2021-04-03 15:34

两个select标签联动,获取数据不成功怎么解决?

前端有两个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

想请教各位大神,要怎么解决项目无法正常显示的问题

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

相关推荐