Pico Css Drop Down Start Value

How do you set the value of the pico css dropdown to start off with a default entry?
// Creates the drop down of months for the month selection of the calendar
let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

let monthPicker = document.querySelector('.months')

months.forEach((e, index) => {
let month = document.createElement('li')
month.innerHTML = `<li data-month="${index}"><a>${e}</a></li>`
monthPicker.appendChild(month)
})
// Creates the drop down of months for the month selection of the calendar
let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

let monthPicker = document.querySelector('.months')

months.forEach((e, index) => {
let month = document.createElement('li')
month.innerHTML = `<li data-month="${index}"><a>${e}</a></li>`
monthPicker.appendChild(month)
})
.months is the following
<details role="list">
<summary aria-haspopup="listbox"></summary>
<ul role="listbox" class="months"></ul>
</details>

<details role="list">
<summary aria-haspopup="listbox"></summary>
<ul role="listbox" class="months"></ul>
</details>

30 Replies
MD
MD2y ago
my goal is to get the current month to be default value starting off but not sure what to do to set it
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Rowe2ry
Rowe2ry2y ago
Use this to get your index starting point. Getting it to be selected in your UI depends on how you’re working your drop-down list logic. If a click event on an li element sets some application state, you’ll just want to set that state on init. If you were using “option” elements inside of a “select” parent element, you’d use a ternary operator in your for each loop to set “selected” to true for the element if the current month number was equal to the index.
MD
MD2y ago
pico is weird though they create a dropdown using details and summary and then ul with li in it I could populate the dropdown but cant use it
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
MD
MD2y ago
MD
MD2y ago
see I populated it with the above code Weird how they build it like a select but dont work
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
MD
MD2y ago
Makes you wonder why have it 🤷‍♂️
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
MD
MD2y ago
Building a calendar with js is odd
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
MD
MD2y ago
I'm not that versed
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
MD
MD2y ago
I tried to find pico css examples Like no body uses it If I did this in react I found a whole component Hate it too
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Gashy
Gashy2y ago
In the docs they have a select example
MD
MD2y ago
Yeah I have to use default select since the details way doesn't work Do you like Js? If so why?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Gashy
Gashy2y ago
Yeah I like it, and because its a core language of the browser, you'd be pretty limited without it like without JS theres only so much native behaviour/functionality
MD
MD2y ago
Yeah just what is the details way for show? It's a weird language that never clicks for me lol
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Gashy
Gashy2y ago
Its just like any other language, it takes time and practise to learn properly
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
MD
MD2y ago
Yeah it's hard i have trouble with padding and margin and such What are these js frameworks like outside of react like vue and svelte? Any better?
Gashy
Gashy2y ago
Personally I think pico are promoting a bad example of how to use the details element as im pretty sure its intended semantic use is an accordion, not a menu what do you mean sorry?
MD
MD2y ago
I've not tried vue or svelte curious if you have I've only used react Yeah they need to fix that in the doc
Gashy
Gashy2y ago
Ive worked with vue 2, vue 3 and react before. But its one of those things where you need to understand vanilla JS in order to use those frameworks correctly, as theres a lot of things you can do which are unoptimized if you dont understand what your code does. But its like jQuery, nothing stopping you from starting to learn with those frameworks/libraries, but it is beneficial to go back to base and understand the core of it
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
MD
MD2y ago
Yeah true
Want results from more Discord servers?
Add your server