Изменить текст на при наведении на него курсора ⇐ CSS

[Гость]

Существует вложенный , и когда вы наводите курсор на один из вложенных , вам нужно изменить его текст, чтобы он соответствовал ctisData2. По умолчанию текст берется из ctisData для вложенного .

Код: Выделить всё

Select
Option1
Option2
Option3


Select



\n";

$head .= "
const ctisData = {
'Option1': ['Op11', 'Op12', 'Op13'],
'Option2': ['Op21', 'Op22', 'Op23'],
'Option3': ['Op31', 'Op32', 'Op33']
};

const ctisData2 = {
'Option1': ['Option11', 'Option12', 'Option13'],
'Option2': ['Option21', 'Option22', 'Option23'],
'Option3': ['Option31', 'Option32', 'Option33']
};

function do_select(select, options) {
select.innerHTML = 'Select';
options.forEach(function(value) {
var z = document.createElement('option');
z.setAttribute('value', value);
z.innerText = value;
select.appendChild(z);
});
}

var sel_category = document.getElementById('optSelect');
var sel_type = document.getElementById('typeSelect');

sel_category.addEventListener('change', function() {
var selectedCategory = sel_category.value;
if (selectedCategory !== '') {
sel_type.style.display = 'block';
do_select(sel_type, ctisData[selectedCategory]);
} else {
sel_type.style.display = 'none';
}
});

sel_type.addEventListener('change', function() {
var selectedValue = sel_type.value;
if (selectedValue !== '') {
window.location.href = 'index.php?_search=' + selectedValue + '&action=search';
}
});

Добавил следующий код, но он не работает. Текст не меняется

Код: Выделить всё

var options = document.querySelectorAll('#optSelect option');
options.forEach(option => {
option.addEventListener('mouseover', function() {
var category = sel_category.value;
var index = Array.from(options).indexOf(this);
var newOptionText = ctisData2[category][index];
this.innerText = newOptionText;
});
option.addEventListener('mouseout', function() {
var category = sel_category.value;
var index = Array.from(options).indexOf(this);
var originalOptionText = ctisData[category][index];
this.innerText = originalOptionText;
});
});

Может быть, вам нужно добавить CSS или какое-то другое решение? Как это реализовать? Помогите пожалуйста.

Подробнее здесь: https://stackoverflow.com/questions/781 ... ng-over-it