Jump to content
  • 0

Determine index value of drop-down box options


eetimm
 Share

Question

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

Sort_ID.jpg

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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

image.thumb.png.da5350882d99b441db8f3c5e70e8b61d.png

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

 

 

Link to comment
Share on other sites

  • 0

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).

90L26Hr.png

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...