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

MDOP•2y 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•2y ago

Message Not Public

Rowe2ry•2y 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.

MDOP•2y 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•2y ago

Message Not Public

MDOP•2y ago

MDOP•2y ago

see I populated it with the above code Weird how they build it like a select but dont work

Unknown User•2y ago

Message Not Public

MDOP•2y ago

Makes you wonder why have it 🤷‍♂️

Unknown User•2y ago

Message Not Public

MDOP•2y ago

Building a calendar with js is odd

Unknown User•2y ago

Message Not Public

MDOP•2y ago

I'm not that versed

Unknown User•2y ago

Message Not Public

MDOP•2y 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•2y ago

Message Not Public

Gashy•2y ago

In the docs they have a select example

MDOP•2y ago

Yeah I have to use default select since the details way doesn't work Do you like Js? If so why?

Unknown User•2y ago

Message Not Public

Gashy•2y 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

MDOP•2y ago

Yeah just what is the details way for show? It's a weird language that never clicks for me lol

Unknown User•2y ago

Message Not Public

Gashy•2y ago

Its just like any other language, it takes time and practise to learn properly

Unknown User•2y ago

Message Not Public

MDOP•2y 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•2y 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?

MDOP•2y 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•2y 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•2y ago

Message Not Public

MDOP•2y ago

Yeah true

Gaming

Programming

Pico Css Drop Down Start Value