Determine index value of drop-down box options

[eetimm]

I am trying to dynamically change the shading on a table column, based on the value of a drop-down, to reflect which column is being sorted by the drop-down.  I am able to change the shading with no problem, but am having problems with identifying the index number of the drop-down box.

I am attempting to use the following script to get the index number for the drop down and use that to change the shading.  

        <script>
            function display() {
                var index = document.getElementById("DROPDOWN_ID").selectedIndex;
                document.write(index);
         }
        </script>
        
My questions are:

    1.  I know that there are different forms of "document.getElementby" based on what element you are looking for.  Is this the correct form?
    
    and 
    
    2.  Based on the Chrome developer tools element inspector, it appears that the dropdown ID is "asorting" (see attached picture). Is this how to find the ID for the control so I can query the index?
    
I suspect that the answer is somewhere between #1 and #2, which ends up with me spinning my wheels.  I am just learning to dive deeper into the code and really appreciate any guidance.

Thanks,

ET

[futurist]

Hi @eetimm,

1. Yes, there are different ways to reference elements based on what you are looking for. You can read more about it here: https://www.w3schools.com/js/js_htmldom_elements.asp

 

2. Yes, I have checked this too on my end and you would have to use the asorting ID to refer to that element. So it should be something like:
document.getElementById("asorting").selectedIndex



whereas 0 is the first option in the dropdown, 1 is the second option, and so on.

 

 

[eetimm]

Thanks so much for helping me out on this.  I really appreciate the community's willingness to assist others!

[CoopperBackpack]

Hello @eetimm,

I checked the Sort By dropdown and as I can see, when the DataPage is loaded for the first time, it incudes the default empty value(option).

But when the user applies the filer at least once, this option is gone. I believe we need to consider this fact, because the index of the selected value depends on the options in the dropdown.

I tested the following code in the DataPage Footer and it works for me. The code is not ideal, however I decided to share it with you to give you ideas on how the solution could be implemented. 

<script>
document.addEventListener('DataPageReady', sortChangeHandler);

function sortChangeHandler(){
    const sortByField = document.getElementById("asorting");
    sortByField.addEventListener('change', colorColumn);
    document.removeEventListener('DataPageReady', sortChangeHandler);
}

function colorColumn(event){
    setTimeout(_ => {
        let selIndex = event.target.selectedIndex;
 
        if(event.target[0].innerHTML ==='&nbsp;') {
            let sortedField = document.querySelectorAll(`td:nth-child(${selIndex})`); 
            sortedField.forEach(cell => {
                cell.style.backgroundColor = '#bbbbbb';
            });
        }
        else{
            let sortedField = document.querySelectorAll(`td:nth-child(${selIndex+1})`); 
            sortedField.forEach(cell => {
                cell.style.backgroundColor = '#bbbbbb';
            });
        }

}, 500)
}
</script>

Hope this helps.