Conflict of script: combine custom-select styling with chained select

[bruno19]

On this page I used this custom-select styling:
https://www.w3schools.com/howto/howto_custom_select.asp
(javascript in the description)

In the sidebar I used the chained select:
http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm
(javascript: here and here)

Both have the class=“custom-select”, which shows fine in the form, but not in the chained select.
My aim is to have the chained select in the sidebar visually as the one in the form.
Is there a conflict of script?

@rpg_digital and @PaulOB would you mind taking a look into this, please?

                                    <div class="custom-select">
                                        <select name="onderwerp">
                                            <option>select your subject</option>
                                            <option value="workshop">workshop</option>
                                            <option value="catering">catering</option>
                                            <option value="cookbook">cookbook</option>
                                            <option value="recipes">recipes</option>
                                            <option value="other">other subject</option>
                                        </select>
                                    </div>

                                <form name="listmenu0" class="form-top">
            	              		<select name="firstlevel" style="width:100%;" class="custom-select"></select>
                                    <select name="secondlevel" style="width:100%;" class="custom-select"></select>
                        	        <div class="pd-top-20"></div>
                                    <input type="button" class="btn btn-main" value="view recipe" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel)">
                                </form>

[PaulOB]

@bruno19

@PaulOB would you mind taking a look into this, please?

I had a look but that’s beyond my pay grade

I can tell you that the custom select required a wrapper around the actual select element with the class of custom-select applied to the wrapper and not the select itself.

However the custom-select routine hides the actual select element and creates its own elements for the dropdown and then updates the actual select afterwards. I don’t see any way that the chained select version could work with this method.

@rpg_digital might be able to help change the custom select into a chained select but I don’t think its a simple matter.

[bruno19]

@PaulOB
Thanks for your reply. And mentioning your pay grade

[rpg_digital]

I will have a look @bruno19, but I can’t promise much.

I’m not a fan of that custom select script. As Paul pointed out it hides the existing select and creates its own custom elements. How does that affect accessibility? — Kind of re-inventing the wheel in a klunky fashion.

Also looking at the code, we start with

var x, i, j, l, ll, selElmnt, a, b, c;

Doesn’t give me a great deal to go on

I also noticed with the custom select that when clicking in an area outside of the dropdown it doesn’t automatically close as it does with a generic version.

If it were me, I would forego the small aesthetic benefit it offers and scrap it.

As mentioned I will have a look though.

edit: I do see we are getting an error in custom select on this line

ll = selElmnt.length;

Need to figure out what ‘ll’ is.

[lamonswilliam2]

A conflict between custom-select styling and a chained select can occur when the custom-select styling is applied to a select element that is also part of a chained select setup. The custom-select styling can interfere with the functionality of the chained select and prevent it from working as expected.

To resolve this conflict, you may need to make some changes to the custom-select styling. Here are a few potential solutions:

1. Modify the custom-select styling to exclude select elements that are part of a chained select setup: You can do this by adding a class or ID to the select elements that are part of the chained select and using CSS to exclude these elements from the custom-select styling.
2. Modify the custom-select styling to work with the chained select: This may involve making changes to the JavaScript or CSS code used for the custom-select styling to accommodate the needs of the chained select.

[bruno19]

Thanks @lamonswilliam2
Could you give me a practical example of that, please, so I can understand what to work with?

[PaulOB]

@bruno19

Could you give me a practical example of that, please, so I can understand what to work with?

I’m afraid that post is just stating the obvious and is of little use to the thread unfortunately. It basically says what we’ve already said and offers no information on how to resolve other than saying “modify it so it works”.

[rpg_digital]

I’m a bit busy this week, so haven’t much time to look things over.

Just to try and at least wrap my head around the custom select script I have re-written it. The naming convention or lack of in the original was terrible. I have also updated it with more modern JS.

window.addEventListener('DOMContentLoaded', () => {

  // template for select options overlay
  const createSelectOverlay = (selected, options = []) => (`
    <div class='select-selected'>${selected}</div>
    <div class='select-items select-hide'>
      ${options.map((option, i) => {
        return `<div data-index='${i + 1}'>${option.textContent}</div>`
      }).join('')}
    </div>
  `)

  const makeSelection = (selected, props = {}) => {
    const { srcSelect, selectSelected, selectItems } = props

    srcSelect.selectedIndex = selected.dataset.index
    selectSelected.textContent = selected.textContent

    // remove all previously selected
    selectItems
      .querySelectorAll('.same-as-selected')
      .forEach((selectItem) => selectItem.removeAttribute('class'))

    selected.className = 'same-as-selected'
    selectSelected.click()
  }

  const closeAllSelects = (currSelect) => {
    const selects = [...document.querySelectorAll('.select-selected')]
    const targetSelects = selects.filter((select) => select !== currSelect)

    targetSelects.forEach((select) => {
      const selectItems = select.parentElement.querySelector('.select-items')

      select.classList.remove('select-arrow-active')
      selectItems.classList.add('select-hide')
    })
  }

  const customSelects = document.querySelectorAll('.custom-select')

  customSelects.forEach((customSelect) => {
    const srcSelect = customSelect.querySelector('select')
    const srcSelected = srcSelect.options[srcSelect.selectedIndex]

    customSelect.insertAdjacentHTML(
      'beforeend',
      createSelectOverlay(
        srcSelected.textContent,
        [].slice.call(srcSelect.options, 1)
      )
    )

    const selectSelected = customSelect.querySelector('.select-selected')
    const selectItems = customSelect.querySelector('.select-items')

    // add click events for the individual options
    selectItems.addEventListener('click', (event) => {
      const selected = event.target

      makeSelection(selected, { srcSelect, selectSelected, selectItems })
    })

    // add click event for toggling the the options on and off
    selectSelected.addEventListener('click', (event) => {
      event.stopPropagation()

      const selectSelected = event.target
      closeAllSelects(selectSelected)

      selectSelected.classList.toggle('select-arrow-active')
      selectItems.classList.toggle('select-hide')
    })
  })

  document.addEventListener('click', closeAllSelects)
})

Note: I do need to add comments

Mine could do with refactoring, and I am sure hasn’t fixed the problem. I do think it maybe a little easier to reason with and is a start.

Edit: I still think it is probably a good idea to drop this entirely. Just inquisitive.

[bruno19]

Hi @rpg_digital
I guess you have dropped it entirely
Is there another way to create a nicer dropdown styling on the chain select?

[rpg_digital]

@bruno19

I guess you have dropped it entirely

I haven’t been intentionally avoiding this, I have had a lot going on and it’s just slipped through the net. The last post was back on Feb the 15th.

As I have kind of indicated though, this is a rabbit hole I am reluctant to go down. I apologise, but unfortunately with my current commitments, it is going to be difficult for me to allocate the time to this right now.

[bruno19]

All good.
Thanks for the effort.