Popular and select a Select (Dropdowlist) option - jQuery - json

Asked

Viewed 76 times

0

Good afternoon!

In an ajax query, I get an object objectAccount, and in this object there is an array, containing a list of banks

I’m populating the select account-bank with the data obtained in this array.

Now I need that in this select in addition to listing all array databases banks, the bank is also selected according to the value in the bank_id.

I believe I have to work on this code:

function pupulateBank(array) {
     $('#account-bank').get(0).options.length = 0;
     $.each(array, function(i, p) {
            $('#account-bank').append($('').val(p.id).html(p.name));
     });
}

I can do otherwise, but it was necessary to make 2 requests, one only to list the banks, but I find unnecessary two requests for this.

I built an example, where it shows superficially what I need.

example jsfiddle

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>The Populate</title>
    <meta name="description" content="The Populate">
    <meta name="author" content="wagner fillio">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--<link rel="stylesheet" href="css/styles.css?v=1.0">-->

</head>

<body>
    <div>
        <form id="form">
            <div>
                <label for="sel-account">ACCOUNT</label>
                <select type="text" id="sel-account">
                    <option id="0" value="0">Create Account</option>
                    <option id="1" value="1">Load Account</option>
                </select>
            </div>
            <div>
                <label for="nome">Description</label>
                <input type="text" id="account-description" />
            </div>
            <div>
                <label for="account-bank">Bank</label>
                <select type="text" id="account-bank">
                    <option>teste</option>
                </select>
            </div>
            <div>
                <label for="msg">Agency</label>
                <input type="text" id="account-agency" />
            </div>
            <div>
                <label for="msg">Account</label>
                <input type="text" id="account-account" />
            </div>
        </form>
    </div>
    <style>
        form {
            margin: 0 auto;
            width: 400px;
            padding: 1em;
            border: 1px solid #CCC;
            border-radius: 1em;
        }
        
        form div + div {
            margin-top: 1em;
        }
        
        label {
            display: inline-block;
            width: 90px;
            text-align: right;
        }
        
        input,
        select {
            font: 1em sans-serif;
            width: 300px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #999;
        }
    </style>
    <!--<script src="js/scripts.js"></script>-->
    <script>
        $(document).ready(function() {
            $('#sel-account').on('change', function() {
                let id = this.value;
                getAccountAjax(id);
            });
        });

        /** Object **/
        function objectFormAccount() {
            //console.log(objectAccount);
            pupulateBank(objectAccount.banks);
            if (objectAccount.id != 0) {
                $('#account-description').val(objectAccount.description);
                //$('#account-bank').val(objectAccount.bank_id);
                $('#account-agency').val(objectAccount.agency);
                $('#account-account').val(objectAccount.account);
                $('#account-beneficiary').val(objectAccount.beneficiary);
                $('#account-type').val(objectAccount.type);
                $('#account-balance').val(objectAccount.balance);
                $('#account-default').prop('checked', objectAccount.default);
            }
        }

        /** function **/
        function pupulateBank(array) {
            $('#account-bank').get(0).options.length = 0;
            $.each(array, function(i, p) {
                $('#account-bank').append($('<option></option>').val(p.id).html(p.name));
            });
        }

        /** ajax **/
        function getAccountAjax(id) {

            let bank_id = null;
            let description = null;
            let agency = null;
            let account = null;

            if (id > 0) {
                bank_id = 3;
                description = 'teste';
                agency = '1234';
                account = '1234-5';
            } else {
                $('#form')[0].reset();
                bank_id = 0;
                description = null;
                agency = null;
                account = null;
            }

            data = {
                "id": id,
                "bank_id": bank_id,
                "banks": [{
                    "id": 1,
                    "bank_code": "341",
                    "name": "Ita\u00fa Unibanco S.A.",
                    "image": "default.jpg"
                }, {
                    "id": 2,
                    "bank_code": "237",
                    "name": "Banco Bradesco S.A.",
                    "image": "default.jpg"
                }, {
                    "id": 3,
                    "bank_code": "001",
                    "name": "Banco do Brasil S.A.",
                    "image": "default.jpg"
                }, {
                    "id": 4,
                    "bank_code": "104",
                    "name": "Caixa Econ\u00f4mica Federal",
                    "image": "default.jpg"
                }, {
                    "id": 5,
                    "bank_code": "033",
                    "name": "Banco Santander (Brasil) S.A.",
                    "image": "default.jpg"
                }, {
                    "id": 6,
                    "bank_code": "389",
                    "name": "Banco Mercantil do Brasil S.A.",
                    "image": "default.jpg"
                }],
                "description": description,
                "agency": agency,
                "account": account,
                "beneficiary": null,
                "type": 0,
                "balance": 0,
                "default": false
            }
            objectAccount = data;
            objectFormAccount();
        }
    </script>
</body>

</html>

javascript jquery json

1 answer

1


Wagner, following the example provided, scrolls to receive bank_id as a parameter in the function and mark Selected as the bank id is equal:

function pupulateBank(array, bank_id) {
    $('#account-bank').get(0).options.length = 0;
    $.each(array, function(i, p) {
        $('#account-bank').append($('<option></option>').val(p.id).html(p.name).attr('selected', p.id === bank_id));
    });
}

Complete change here: https://pastebin.com/rnCE5SDm

  • thank you very much, it worked for me.

Browser other questions tagged javascript jquery json

You are not signed in. Login or sign up in order to post.