Warum wird die Schaltfläche „Zurücksetzen“ X nicht über dem ausgewählten Elementwert in jQuery angezeigt, nachdem die St
Posted: 19 Jan 2025, 18:53
Ich arbeite derzeit mit jQuery und habe ein Problem mit der Rücksetzfunktion für eine Dropdown-Liste festgestellt. Insbesondere nach dem Hinzufügen von Standardoptionen in Arabisch und Englisch wird die Schaltfläche zum Zurücksetzen nicht korrekt angezeigt.
Wenn ein Wert ausgewählt wird, möchte ich eine Schaltfläche zum Zurücksetzen anzeigen (gekennzeichnet als „X“). ). Wenn jedoch keine Option ausgewählt ist, sollte im Dropdown-Menü entweder „Port auswählen“ oder „Andere Länder“ angezeigt werden, ohne dass die Schaltfläche „Zurücksetzen“ angezeigt wird.
Vor dem Ändern der Sprache auf Arabisch oder Englisch wird ein Reset durchgeführt Die Schaltfläche erscheint wie erwartet. Hier ist der relevante Codeausschnitt:
Nach dem Wechsel zu Arabisch oder Englisch erscheint die Reset-Schaltfläche („X“) nicht. Der Code für das Dropdown mit der Standardoption lautet wie folgt:
Zusätzlich hätte ich gerne ein Bild, um die Reset-Taste in Rot in der zweiten Zeile darzustellen.

Genau wie dieses Beispiel
aktualisierter Beitrag
Zeilenänderung Sprache ist
Wenn ein Wert ausgewählt wird, möchte ich eine Schaltfläche zum Zurücksetzen anzeigen (gekennzeichnet als „X“). ). Wenn jedoch keine Option ausgewählt ist, sollte im Dropdown-Menü entweder „Port auswählen“ oder „Andere Länder“ angezeigt werden, ohne dass die Schaltfläche „Zurücksetzen“ angezeigt wird.
Vor dem Ändern der Sprache auf Arabisch oder Englisch wird ein Reset durchgeführt Die Schaltfläche erscheint wie erwartet. Hier ist der relevante Codeausschnitt:
Code: Select all
row += "";
var countriesPorts = Result.d.P_PORTS.filter(d => d.COUNTRY_ID == Result.d.P_DISPATCH_DATA[i].PICKUP_COUNTRY_ID);
if (countriesPorts != null) {
if (countriesPorts.length > 0) {
for (var j in countriesPorts) {
row += " " + countriesPorts[j].PORT_NAME + " ";
}
row += " ";
}
}
Code: Select all
var defaultOption = MYLang.ReturnLang() == "ar-KW" ? "اختر منفذ" : "select port";
row += "" +
"" + defaultOption + "";
var countriesPorts = Result.d.P_PORTS.filter(d => d.COUNTRY_ID == Result.d.P_DISPATCH_DATA[i].PICKUP_COUNTRY_ID);
if (countriesPorts != null && countriesPorts.length > 0) {
for (var j in countriesPorts) {
row += "" + countriesPorts[j].PORT_NAME + "";
}
}

Genau wie dieses Beispiel
Code: Select all
$(document).ready(function() {
var defaultOption = "Select Port"; // Change this based on language if needed
var countriesPorts = [{
PORT_ID: '1',
PORT_NAME: 'Port A'
},
{
PORT_ID: '2',
PORT_NAME: 'Port B'
},
{
PORT_ID: '3',
PORT_NAME: 'Port C'
}
];
var row = "" +
"" + defaultOption + "";
countriesPorts.forEach(function(port) {
row += "" + port.PORT_NAME + "";
});
row += "";
$('#dropdown-container').html(row);
$('.chosen-select').chosen();
function checkSelection() {
var selectedValue = $('#ddl_Port').val();
if (selectedValue) {
$('.reset-button').show();
} else {
$('.reset-button').hide();
}
}
$('#dropdown-container').prepend("X");
$('#ddl_Port').on('change', function() {
checkSelection();
});
$('#reset-button').on('click', function() {
$('#ddl_Port').val('').trigger("chosen:updated");
checkSelection();
});
});
Code: Select all
.reset-button {
display: none;
color: red;
cursor: pointer;
margin-bottom: 10px;
}
Code: Select all
aktualisierter Beitrag
Zeilenänderung Sprache ist
Code: Select all
var defaultOption = MYLang.ReturnLang() == "ar-KW" ? "اختر منفذ" : "select port";