fastadmin fieldlist里面使用selectpage联动动态修改data-params

最新推荐文章于 2025-03-20 15:49:19 发布

不行就去养猪

最新推荐文章于 2025-03-20 15:49:19 发布

阅读量1k

点赞数 5

分类专栏： fastadmin 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/luhaiping1993/article/details/136481084

版权

fastadmin 专栏收录该内容

6 篇文章

订阅专栏

文章介绍了如何在网页中使用selectpage插件实现表单元素联动，当country_id选择项改变时，动态更新province_id的data-params参数。涉及到JavaScript的DOM操作和事件处理。

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

       selectpage联动动态修改data-params参数

在这里插入图片描述
添加页面代码：

        <script id="basictpl" type="text/html">
            <tr >
                <td><div class="sp_container form-rule" style="width: 100%;"><input type="text" name="<%=name%>[<%=index%>][country_id]" data-source="country/selectpage" data-params='{"custom[level]":"2"}' class="form-control selectpage country_id" id="country_id<%=index%>" data-index="<%=index%>" value="<%=row.country_id%>" placeholder=""/></div></td>
                <td><div class="sp_container form-rule" style="width: 100%;"><input type="text" name="<%=name%>[<%=index%>][province_id]" class="form-control province_id selectpage" data-source="country/selectpage" id="province_id<%=index%>" data-index="<%=index%>" value="<%=row.province_id%>" placeholder=""/></div></td>
                <td><div class="sp_container form-rule" style="width: 100%;"><input type="text" name="<%=name%>[<%=index%>][zipcode_start]" class="form-control" value="<%=row.zipcode_start%>" placeholder=""/></div></td>
                <td><div class="sp_container form-rule" style="width: 100%;"><input type="text" name="<%=name%>[<%=index%>][zipcode_end]" class="form-control" value="<%=row.zipcode_end%>" placeholder=""/></div></td>
                <td>
                    <!--下面的两个按钮务必保留-->
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                </td>
            </tr>
        </script>

js代码：

        $(document).on("fa.event.appendfieldlist", ".btn-append", function(e,obj){
            Form.events.selectpage($("#first-table"));
            $('.country_id', obj).change(function(){
                var index = $(this).data('index');
                $('#province_id'+index+'_text').val('');
                $("#province_id").val('');
                $("#province_id"+index+"_text").selectPageClear();
                $("#province_id"+index+'_text').data('selectPageObject').option.params = function () {
                    return {"custom[level]":"3","custom[pid]":$('#country_id'+index).val()};
                };
            });
        });