How to store multiple drop down values inside a variable?

Question

So I have this javascript function that loops through each user account and displays them in a drop-down menu. When the user selects an option from the drop-down menu, it takes the Iban number as its main id which is stored in ddlAccountFrom. Is there a way how I can store two values when the user selects an option, like for instance the Iban and Currency into separate variables?

function getAccountFrom() {
    var username = $("#hiddenUsername").val();

    var url = "http://localhost:63723/api/BankAccountsApi/GetBankAccounts/?username=" + username + "&id=2";
    $.getJSON(url, function (data) {
            var table = "<select id=\"ddlAccountFrom\">";

            table += "<option value=\"-1\">Select an Account</option>";
            $.each(data, function (key, val) {

                table += "<option value=\"" + val.Iban + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";

            });
            table += "</select>";
            $('#divAccountFrom').html(table);
    });
}

I am using the ddlAccountFrom in this function..

function Transfer() {
    var accountFrom = $("#ddlAccountFrom").val();
    var accountTo = $("#txtAccountTo").val();
    var amount = $("#txtAmount").val();


    var url = "http://localhost:63723/api/BankAccountsApi/TransferFunds/?  
    ibanFrom=" + accountFrom + "&ibanTo=" + accountTo + "&amount=" + amount;

    $.getJSON(url, function (data) {
        alert(data);
    })

    .error (function () {
        alert("Not enough balance! The amount entered exceed the balance found in this account. Please try again.");
    })

}

Well, you should probably show your code for when the user selects an option, but in general you can just concatenate the values using a separator and put it in the `value` of the option. — Heretic Monkey, Apr 28 '16 at 15:30

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

You can use the data-custom attribute, like this:

table += "<option value=\"" + val.Iban + "\" data-currency=\"" + val.Currency + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";

To access variable see jquery-cant-get-data-attribute-value So you can read:

var selectedCurrency= $("#ddlAccountFrom :selected").data('currency');

edited May 23 '17 at 12:23

Community

1
1

answered Apr 28 '16 at 15:30

lamp76

333
1
10

Is data-currency a variable? – N.Cre Apr 28 '16 at 15:34
Yes you can read by jQuery(your selector).data('currency') or jQuery(your selector).attr('data-currency'). – lamp76 Apr 28 '16 at 15:36
Like this --- var currency = $("#ddlAccountFrom").data('currency'); -- ?? – N.Cre Apr 28 '16 at 15:44
I created an alert to output the currecy, and it is showing as undefined --> alert($('#ddlAccountFrom').data("currency")); – N.Cre Apr 28 '16 at 16:03
Sorry you're right you should use $("#ddlAccountFrom :selected").data('currency'); – lamp76 Apr 28 '16 at 16:09

score 0 · Answer 2 · answered Apr 28 '16 at 15:36

You could :

Concatenate your 2 data in 1 string with a separator (for ex myIban#myCurrency) and then split your value to get back your 2 distinct data
Listen to your dropdown changes, for example adding a onchange=updateData(val.Iban, val.Currency) attribute to your option html, and in your js :
```
var currentIban, currentCurrency;

function updateData(iban, currency) {
    currentIban = iban;
    currentCurrency = currency;
}
```
Add a data-custom attribute, like data-currency or data-iban

How to store multiple drop down values inside a variable?

2 Answers2