原生H5 select自动提示搜索

最新推荐文章于 2025-04-27 10:00:49 发布

JOEYHHH

最新推荐文章于 2025-04-27 10:00:49 发布

阅读量1.2k

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/JOEYHHH/article/details/121973603

版权

这段代码展示了如何使用jQuery AJAX从服务器获取生产线数据，并将其动态添加到HTML选择器中。通过调用`getProductLineBox`函数，将返回的JSON列表遍历并转化为下拉菜单的选项。如果请求失败，会显示一个提示消息。

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

                生产线：
                <select id="productLineId" name="productLineId">
                    <option value="-1">请选择</option>
                </select>

jq:


        //生成生产线字典
        $.ajax({
            url: '${pageContext.request.contextPath}/getProductLineBox.do',
            type: 'post',
            dataType: 'json',
            async: false,
            success: function (data) {
                var productLineId = $('#productLineId');
                getProductLineBox(productLineId, data.lineList);	//生产线
            },
            error: function () {
                $.messager.alert("提示", "字典加载错误");
            }

        });

js:

    //将productLine字典加入元素
    function getProductLineBox(productLineId, jsonList) {
        $.each(jsonList, function (i, row) {
            productLineId.append('<option value="' + row.id + '">' + row.lineName + '</option>');
        });
    }