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

最新推荐文章于 2024-05-06 08:34:50 发布

zerovpp

最新推荐文章于 2024-05-06 08:34:50 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： jfinal eova js 文章标签： selected option jfinal Jquery 根据数据库中值加载

本文链接：https://blog.youkuaiyun.com/zerovpp/article/details/81035419

eova 同时被 3 个专栏收录

32 篇文章

订阅专栏

jfinal

27 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍如何使用HTML Select控件结合Ajax实现下拉菜单选项更改时远程数据库的更新功能，同时展示如何在页面加载时根据远程数据库的值设置Select控件的默认选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

环境：java/html/Jquery/ajax

1、前端：

html：例如

<select id="closed_account" class="dropdown" style="width:150px" name="closed_value">
    <option value="1">已关闭</option>
    <option value="2">开启中</option>
</select>

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