How can this verbose jQuery be elegantized?

Question

I have 5 rows that each have an identical selection element (or dropDownList) in the first cell of each row. Choosing a value from that populates the values in another selection element.

How can I populate the selection items, and in a way that is less verbose than the "brute force" approach here:

$(document).on("change", '[id$=ddlPaymentType1]', function () {
    var value = $(this).val();
    if (value == '1') {
        $('[id$=ddlAccount1]').text("Replace this with the values for selection 1");
    }
    else if (value == '2') {{
        $('[id$=ddlAccount1]').text("Replace this with the values for selection 2");
    }
    else if (value == '3') {{
        $('[id$=ddlAccount1]').text("Replace this with the values for selection 3");
    }
    else if (value == '4') {{
        $('[id$=ddlAccount1]').text("Replace this with the values for selection 4");
    }
    else if (value == '5') {{
        $('[id$=ddlAccount1]').text("Replace this with the values for selection 5");
    }
    else if (value == '6') {{
        $('[id$=ddlAccount1]').text("Replace this with the values for selection 6");
    }
    /* TODO: Add the rest (not value=11, as that is the "VENDORS" category item (not a real selection in itself)) */
});

With the above, I would have to respond to about 20 different values (only six are shown), and I would have to five identical-except-for-the-ID-and-args functions. IOW, I would also need

$(document).on("change", '[id$=ddlPaymentType2]', function () {
    . . .
});

...etc (up through ddlPaymentType5).

What is a better way to accomplish this?

Answer 1

With help from Jan above (as in above this answer on this page, not as in one who resides in the heavens) and from "jakecigar" over on the jQuery forums, plus an "add-back" of my own (var options = selects[$(this).val()];) whose omission was causing errors, this is what I'm using as a starting point now:

$(document).on("change", '[id$=ddlPaymentType1]', function () {
    var selects = [
    [
        ["value 1", "text 1"],
        ["value 2", "text 2"]
    ],
    [
        ["value 1", "text 1"],
        ["value 2", "text 2"]
    ]
    /* Rest of your values here */
  ]

  var $select = $('[id$=ddlAccount1]');
  $select.empty();

  var options = selects[$(this).val()];

  console.log(options, $select)

  $.each(options, function (i, item) {
  console.log(item)
  $select.append($("<option />", {
      value: item[0],
      text: item[1]
    }))
  });        
});

Answer 2

You could do for example something like this:

var selects = { "1": [
                        ["value 1", "text 1"], 
                        ["value 2", "text 2"]
                      ]
               ,"2": [
                        ["value 1", "text 1"], 
                        ["value 2", "text 2"]
                      ]
               , /* Rest of your values here */
};

var $select = $('[id$=ddlAccount1]');
$select.children().remove();

var options = selects[$(this).val()];

options.forEach(function(item) {
  $select.append($("<option />").val(item[0]).text(item[1]));
});

http://jsbin.com/wukovavupe/edit?html,js,output

Answer 3

Is this what you are looking for..?

 $(document).on("change", '[id$=ddlPaymentType1]', function () {
      var value = $(this).val();        
        $('[id$=ddlAccount1]').text("Replace this with the values for selection " + value);                   
        /* TODO: Add the rest (not value=11, as that is the "VENDORS" category item (not a real selection in itself)) */
    });