Warum wird die Schaltfläche „Zurücksetzen“ X nicht über dem ausgewählten Elementwert in jQuery angezeigt, nachdem die St ⇐ Jquery

[Guest]

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:

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 += " ";
}
}

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:

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 + "";
}
}

Zusätzlich hätte ich gerne ein Bild, um die Reset-Taste in Rot in der zweiten Zeile darzustellen.

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";