Change text to when hovering over it

There is a nested <select>, and when you hover over one of the nested <option>, you need to change its text to match ctisData2. By default, the text is taken from ctisData for the <option> of the nested <select>.

<th><form class='lm_search_box'>
                        <div style='position: relative;'>
                            <select id='optSelect' class='lm_search_input' style='font-family: \"Roboto\"; font-size: 15px;'>
                                <option value=''>Select</option>
                                <option value='Option1'>Option1</option>
                                <option value='Option2'>Option2</option>
                                <option value='Option3'>Option3</option>
                            </select>
                            <select id='typeSelect' class='lm_search_input' style='font-family: \"Roboto\"; display: none;'>
                                <option value=''>Select</option>
                            </select>
                        </div>
                   </form>
                </th>\n";

                $head .= "<script>
                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 = '<option>Select</option>';
                  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';
                  }
                });
            </script>

Added the following code but it doesn't work. The text does not change

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

Maybe you need to add some css or some other solution? How to implement it? Help please.

There is such an option, but it does not work. What is the problem?

$head .= "<script>
        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 = '<option>Select</option>';
          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';

Answers

To dynamically change the text of the nested <option> elements in the <select> based on mouse hover, you need to adjust your event listeners and the way you're accessing the options. Since the second <select> is dynamically populated, you'll need event delegation or set up event listeners after populating the options.

Here's how you can achieve it:

sel_type.addEventListener('mouseover', function(event) {
    var target = event.target;
    if (target.tagName === 'OPTION') {
        var category = sel_category.value;
        var index = Array.from(sel_type.options).indexOf(target);
        var newOptionText = ctisData2[category][index];
        target.innerText = newOptionText;
    }
});

sel_type.addEventListener('mouseout', function(event) {
    var target = event.target;
    if (target.tagName === 'OPTION') {
        var category = sel_category.value;
        var index = Array.from(sel_type.options).indexOf(target);
        var originalOptionText = ctisData[category][index];
        target.innerText = originalOptionText;
    }
});

This code listens for mouseover and mouseout events on the <select> element with the id typeSelect. When the event target is an <option> element, it retrieves the index of the option within the <select> and uses it to access the corresponding text from ctisData2 or ctisData. Finally, it updates the innerText of the <option> accordingly.

Make sure to place this code after the part where you populate the options dynamically in your script to ensure that the event listeners are attached correctly.