根据远程数据库值，加载selected项，并修改其option值

亦凉 2022-05-20 06:21 141阅读 0赞

场景：在html的select下拉框中，选择不同的项，更新远程库中的值；打开html时，根据远程库的值，加载值所对应的项

环境：java/html/Jquery/ajax

1、前端：

html：例如

JQuery：

$(document).ready(function () {
      
        var $closed = $('#closed_account');
        var url3 = "你JAVA中方法路径";
        var url4 = "你JAVA中方法路径";
    
        initClosedAccount();
        function initClosedAccount() {
      //初始化，并按库中值渲染出对应项
            $.ajax({
                type:"post",
                async:true,
                url:url4,
                dataType:"json",
                success:function (date) {
      
                    var num_closed = $closed.find("option");//查找所有option
                    for (var j = 1;j<num_closed.length;j++) {//遍历，如果val==库中值，则命中并展示
                        if($(num_closed[j]).val() == date){
                            $(num_closed[j]).attr("selected","selected");
                        }
                    }
                }
            })
        }
        $closed.change(function () {
      //更新关账状态
            var val_c = $closed.find("option:selected")[0].value;
            $.ajax({
                type: "POST",
                async: true,
                url: url3 + val_c,
                dataType: "json",
                success: function (o) {
                    if (o.success) {
                        $.slide(msg);
                    } else {
                        alert("操作错误");
                    }
                }
            })
        });

2、后端，具体的JAVA方法（JFinal框架）

//获取、修改关账状态
    public void setClosedAccount(){
        Integer closed_value = getParaToInt("value");//取参数
        Db.use.update("update a set value = ? ",closed_value);
        renderJson(Easy.sucess());
    }
    public void getClosedAccount(){
        Integer closedAccount = Db.use.queryInt("select value from a ");
        renderJson(closedAccount);
    }