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?
3 Antworten
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
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)) */
});
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]
}))
});
});