Ich habe 5 Zeilen, die jeweils ein identisches Auswahlelement (oder dropDownList) in der ersten Zelle jeder Zeile haben. Wenn Sie einen Wert auswählen, werden die Werte in einem anderen Auswahlelement ausgefüllt.

Wie kann ich die Auswahlelemente auf eine Weise ausfüllen, die weniger ausführlich ist als der "Brute Force" -Ansatz hier:

$(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)) */
});

Mit dem oben Gesagten müsste ich auf ungefähr 20 verschiedene Werte reagieren (nur sechs werden angezeigt), und ich müsste auf fünf identische Funktionen mit Ausnahme der ID- und Args-Funktionen reagieren. IOW würde ich auch brauchen

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

... etc (bis über ddlPaymentType5).

Was ist ein besserer Weg, um dies zu erreichen?

2
B. Clay Shannon 7 Aug. 2015 im 01:37

3 Antworten

Beste Antwort

Sie könnten zum Beispiel so etwas tun:

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

2
Jan 8 Aug. 2015 im 15:09

Suchst du danach..?

 $(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)) */
    });
1
ssilas777 6 Aug. 2015 im 22:43

Mit Hilfe von Jan oben (wie oben in dieser Antwort auf dieser Seite, nicht wie bei jemandem, der im Himmel wohnt) und von "jakecigar" in den jQuery-Foren sowie einem eigenen "Add-Back" (var options = wählt [$ (this) .val ()];) aus, dessen Auslassung Fehler verursacht hat. Dies ist das, was ich jetzt als Ausgangspunkt verwende:

$(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]
    }))
  });        
});
0
B. Clay Shannon 10 Aug. 2015 im 17:44