Почему кнопка сброса X не отображается над значением выбранного элемента в jQuery после добавления опции по умолчанию на ⇐ CSS

[Anonymous]

В настоящее время я работаю с jQuery и столкнулся с проблемой, связанной с функцией сброса раскрывающегося списка. В частности, после добавления параметров по умолчанию на арабском и английском языках кнопка сброса отображается неправильно.
Когда выбрано значение, я хочу отображать кнопку сброса (обозначаемую как «X»). ). Однако, если ни один параметр не выбран, в раскрывающемся списке должно отображаться либо «Выбрать порт», либо «اختر منفذ» без отображения кнопки сброса.
Перед изменением языка на арабский или английский необходимо выполнить сброс. Кнопка отображается так, как ожидалось. Вот соответствующий фрагмент кода:
row += "";
var countriesPorts = Result.d.P_PORTS.filter(d => d.COUNTRY_ID == Result.d.P_DISPATCH_DATA.PICKUP_COUNTRY_ID);

if (countriesPorts != null) {
if (countriesPorts.length > 0) {
for (var j in countriesPorts) {
row += " " + countriesPorts[j].PORT_NAME + " ";
}
row += " ";
}
}


После переключения на арабский или английский язык кнопка сброса («X») не появляется. Код раскрывающегося списка с опцией по умолчанию выглядит следующим образом:
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.PICKUP_COUNTRY_ID);

if (countriesPorts != null && countriesPorts.length > 0) {
for (var j in countriesPorts) {
row += "" + countriesPorts[j].PORT_NAME + "";
}
}


Кроме того, мне нужно изображение, иллюстрирующее кнопку сброса красного цвета во втором ряду.

Точно как этот образец





Dropdown with Reset


.reset-button {
display: none;
color: red;
cursor: pointer;
margin-bottom: 10px;
}







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






Подробнее здесь: https://stackoverflow.com/questions/793 ... er-add-def