CODEWITHSUNDEEP
javascriptjqueryselectdrop-down-menuinput
Mark
Mark

Reputation: 21

Populating an input table based on dropdown menus

I am very new to Javascript/JQuery and I am having difficulty. What I am trying to do is put a value into an input field based on two dropdown menus (a product and the currency type). Tried a whole bunch of different things but nothing seems to work quite right.

http://jsfiddle.net/uxjvE/5/

var cur = {
   GBP: ['£20', '£55', '£64', '£90', '£100', '£65', '£75', '£100', '£135', '£255', '£260'],
   EUR: ['€24', '€65', '€76', '€107', '€119', '€77', '€89', '€119', '€160', '€302', '€308'],
   USD:['$85', '$85', '$99', '$139', '$155', '$100', '$116', '$155', '$209', '$394', '$402']
}

$(document).ready(function() {
    $('.visaType').change(function() {



    }).change(); 
});

Saw some other similar questions but was unable to get this to work right. Any help is much appreciated.

Thanks,

Mark

Upvotes: 2

Views: 148

Answers (3)

Nimya Krishnan
Nimya Krishnan

Reputation: 1

    $('#visaType').change(function() { 
        var selectedoption = this.selectedIndex;
        var currency = $('#currency-choice').val();         
        $('#business-visa-amount').val( cur[currency][selectedoption]);

    });

Upvotes: 0

Atif
Atif

Reputation: 10880

var cur = {
    GBP: ['£20', '£55', '£64', '£90', '£100', '£65', '£75', '£100', '£135', '£255', '£260'],
    EUR: ['€24', '€65', '€76', '€107', '€119', '€77', '€89', '€119', '€160', '€302', '€308'],
    USD: ['$85', '$85', '$99', '$139', '$155', '$100', '$116', '$155', '$209', '$394', '$402']
}

$(document).ready(function () {
    $('#visaType').change(function () {

        var currencyValue = $('#currency-choice').val();

        $('#business-visa-amount').val(cur[currencyValue][this.selectedIndex]);

    }).change();
});

Fiddle - http://jsfiddle.net/uxjvE/26/

Explaination

cur[currencyValue][this.selectedIndex]

cur is your object which holds 3 arrays GBP,USD,EUR

currencyValue will fetch me the selected currency, that means cur[currencyValue] is same as cur.USDor cur.EURor cur.GBP.

this.selectedIndex will fetch me the index of selected option from 0 to (length-1) based on your selection. Now I am assuming that the same index in array is the amount that you want to display.

Upvotes: 0

billyonecan
billyonecan

Reputation: 20250

Presumably you want the price to update when either of the <select> options are changed:

$('#visaType, #currency-choice').change(function() {    

   var currencyType = $('#currency-choice').val();
   var price = $('option:selected', '#visaType').index();

   $('#business-visa-amount').val(cur[currencyType][price]);   

}).change();

Here's a fiddle

Upvotes: 1

Related Questions