动态赋值与数据绑定的select的实现

最新推荐文章于 2024-03-31 17:46:54 发布

laizhixue

最新推荐文章于 2024-03-31 17:46:54 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： knockout前端框架 HTML AJAX JavaScript JQuery

本文链接：https://blog.csdn.net/laizhixue/article/details/79876997

JavaScript 同时被 3 个专栏收录

37 篇文章

订阅专栏

JQuery

27 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

本文介绍了一种在前端通过Ajax获取数据，并将其绑定到Select元素的方法，同时实现了与Model对象的数据同步。具体操作包括使用jQuery发起Ajax请求，处理返回的数据，并通过事件监听更新Model中的属性。

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

考虑到一些因素，还是需要将select的数据传入Model中进行保存，所以得做如下修改。

 @*控制碼*@
            <label class="control-label col-sm-2">
                控制碼<font class="red">*</font>
            </label>
            <select id="STEUS" class="col-sm-2 form-control" style="margin-top:1px;" title="控制碼" onchange="KStarForm.koContentModel.WC.STEUS($('#STEUS').val());" disabled>
                @*<option value="PP01" selected>PP01</option>*@
            </select>

  function get_STEUS_SelectData() {
            $.ajax({
                type: "post",
                url: "/领域名/控制器名字/Get_STEUS_SelectData",
                async: false,
                data: {},
                dataType: "JSON",
                success: function (data) {
                    var str = null;
                    //控制碼select
                    for (i = 0; i < data.length; i++) {
                        if (data[i][0] == "PP01") {
                            str += "<option value='" + data[i][0] + "' selected>" + data[i][0] + " " + data[i][1] + "</option>";

                        } else {
                            str += "<option value='" + data[i][0] + "'>" + data[i][0] + " " + data[i][1] + "</option>";

                        }

                    }
                    $("#STEUS").html(str);
                    $("#STEUS").val("PP01");//初始化默认值
                    KStarForm.koContentModel.WC.STEUS("PP01");//初始化默认值

                }
            });
        }

ajax返回的数据类型为List<List<string>>;

Model:

WorkCenter WC;

public WorkCenter{

public string STEUS { get; set; }

.......

}