input 自动填充显示label而不是value

input使用datalist时,如果datalist中的option有value和label两个属性;
在给input赋值时,有时会需要显示的是label,而传到form中的值为value;
这时可以在需要的input下方建一个隐藏的input,name设为需要传的name值;
将option中的label赋值给显示的input,value赋值给隐藏的input。
页面中方法:

// An highlighted block
        $(function () {
        //页面加载完加载datalist
            var abc =getCompanyAndManufact($,'${base}');
        });
        $('input[list]').on('input', function(e) {
        //监听input的datalist
            var $input = $(e.target);
            var bb = autoFill($,'${base}',$input);
        });

js中方法:

// An highlighted block
function getCompanyAndManufact($,url) {
    $.ajax({
        type: "POST",
        url:url+"/xyManufact/getAllManufact",
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
            var manufactList = new Array();
            manufactList = data;
            for (var i = 0; i < manufactList.length; i++) {
                var option = '<option value="' + manufactList[i].manufactCode + '" >'+data[i].manufactName+'</option>';
                $("#manufactList").append(option);
            }
        },error:function () {
            layui.layer.msg("加载厂家数据失败");
        }
    });
        $.ajax({
            type: "POST",
            url:url+"/xyCompany/getAllCompany",
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                var companyTypeList = new Array();
                companyTypeList = data;
                for (var i = 0; i < companyTypeList.length; i++) {
                    var option = '<option value="' + data[i].companyCode + '">'+data[i].companyName+'</option>';
                    $("#companyTypeList").append(option);
                }
            },error:function () {
                layui.layer.msg("加载企业数据失败");
            }
        });
    // $.ajax({
    //     type: "POST",
    //     url:url+"/xyCompany/getAllCompany",
    //     dataType: "json",
    //     contentType: "application/json",
    //     success: function (data) {
    //         for (var i = 0; i < data.length; i++) {
    //             var option = '<option value="' + data[i].companyCode + '" >' + data[i].companyName + '</option>';
    //             $("#s_moduleOrganization").append(option);
    //         }
    //         form.render('select');
    //     },error:function () {
    //         layui.layer.msg("加载企业数据失败");
    //     }
    // });
    // $.ajax({
    //     type: "POST",
    //     url:url+"/xyManufact/getAllManufact",
    //     dataType: "json",
    //     contentType: "application/json",
    //     success: function (data) {
    //         for (var i = 0; i < data.length; i++) {
    //             var option = '<option value="' + data[i].manufactCode + '" >' + data[i].manufactName + '</option>';
    //             $("#s_manufacturer").append(option);
    //         }
    //         form.render('select');
    //     },error:function () {
    //         layui.layer.msg("加载生产厂商数据失败");
    //     }
    // });
};
function autoFill($,url,$input) {
    if($input[0].id == "s_manufacturer"){
        var $options = $('#' + $input.attr('list') + ' option'),
            label = $input.val();
        for(var i = 0; i < $options.length; i++) {
            var $option = $options.eq(i);
            if ($option[0].value === label) {
                $input.val($option[0].label);
                $("input[name='s_manufacturer']").val($option[0].value);
            }
        }
    }
    if($input[0].id == "s_moduleOrganization"){
        var $options = $('#' + $input.attr('list') + ' option'),
            label = $input.val();
        for(var i = 0; i < $options.length; i++) {
            var $option = $options.eq(i);
            if($option[0].value === label) {
                $input.val( $option[0].label );
                $("input[name='s_moduleOrganization']").val($option[0].value);
                //给用户输入框datalist赋值
                $("#moduleUserList")[0].length = 1;
                $.ajax({
                    type: "POST",
                    url:url+"/admin/system/user/getUserByCompanyCode?companyCode="+$option[0].value,
                    dataType: "json",
                    contentType: "application/json",
                    success: function (data) {
                        for (var i = 0; i < data.length; i++) {
                            var option = '<option value="' + data[i].loginName + '" >' + data[i].nickName + '</option>';
                            $("#moduleUserList").append(option);
                            $("input[name='s_moduleUser']").val("");
                        }
                    },error:function () {
                        layui.layer.msg("加载企业附属用户失败");
                    }
                });
                break;
            }
        }
    }
    if($input[0].id == "s_moduleUser"){
        var $options = $('#' + $input.attr('list') + ' option'),
            label = $input.val();
        for(var i = 0; i < $options.length; i++) {
            var $option = $options.eq(i);
            if ($option[0].value === label) {
                $input.val($option[0].label);
                $("input[name='s_moduleUser']").val($option[0].value);
            }
        }
    }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现JSP表单自动填充,你需要将先前提交表单时所输入的数据进行存储,然后在下一次访问该表单时将已存储的数据填充到表单中。 一种简单的方法是使用浏览器的本地存储功能(localStorage)。在表单提交时,将表单数据存储到localStorage中。在下一次访问该表单时,从localStorage中读取已存储的数据,并将其填充到表单中。以下是一个示例代码: ```html <!-- 在表单中添加一个id以便访问 --> <form id="myForm"> <label for="name">姓名:</label> <input type="text" name="name" id="name"> <br> <label for="email">邮箱:</label> <input type="email" name="email" id="email"> <br> <button type="submit">提交</button> </form> <script> // 当文档加载完毕时,检查localStorage中是否有存储的数据 document.addEventListener('DOMContentLoaded', function() { var form = document.getElementById('myForm'); var storedData = JSON.parse(localStorage.getItem('formData')); if (storedData) { // 将存储的数据填充到表单中 form.elements.name.value = storedData.name; form.elements.email.value = storedData.email; } // 监听表单的提交事件,将表单数据存储到localStorage中 form.addEventListener('submit', function(event) { event.preventDefault(); var formData = { name: form.elements.name.value, email: form.elements.email.value }; localStorage.setItem('formData', JSON.stringify(formData)); alert('表单已提交!'); }); }); </script> ``` 在这个示例中,我们使用了JSON.parse()和JSON.stringify()来将表单数据转换为字符串并存储到localStorage中。当用户重新访问该表单时,我们使用JSON.parse()方法将存储的数据转换回对象,并将其填充到表单中。 请注意,这种方法只能在同一台计算机上使用。如果用户在不同的设备或浏览器中访问该表单,存储的数据将不可用。为了解决这个问题,你可以考虑使用服务器端的会话管理或数据库来存储表单数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值