Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Data attribute to select option #335

Open
BlackBurnVP opened this issue Aug 25, 2022 · 5 comments
Open

Add Data attribute to select option #335

BlackBurnVP opened this issue Aug 25, 2022 · 5 comments
Assignees

Comments

@BlackBurnVP
Copy link

For now it's impossible to add some data attributes to select options. If we add it to html so it's stays under this option, but not transfers to sumoselect optWrapper

  • @Zenoo
    Copy link
    Collaborator

    Zenoo commented Aug 28, 2022

    Could you give me an example of what you would need?

    @AzzaAzza69
    Copy link

    AzzaAzza69 commented Aug 29, 2022

    I think he would like the attributes set against the regular options transferring to the equivalent "li".
    so when this is "converted" to a sumoselect:
    {select}
    {option data-whatever="test">option1{/option}
    {option data-something="else">option2{/option}
    {/select}

    it ends up like this:
    {div class="optWrapper"}
    {ul class="options"}
    {li class="opt selected" data-whatever="test"}{label}option1{/label}{/li}
    {li class="opt" data-something="else"}{label}option2{/label}{/li}
    {/ul}
    {/div}

    @BlackBurnVP
    Copy link
    Author

    BlackBurnVP commented Aug 29, 2022

    Yes. It's what I want to achieve. Thank you

    I think he would like the attributes set against the regular options transferring to the equivalent "li". so when this is "converted" to a sumoselect: {select} {option data-whatever="test">option1{/option} {option data-something="else">option2{/option} {/select}

    it ends up like this: {div class="optWrapper"} {ul class="options"} {li class="opt selected" data-whatever="test"}{label}option1{/label}{/li} {li class="opt" data-something="else"}{label}option2{/label}{/li} {/ul} {/div}

    @Zenoo
    Copy link
    Collaborator

    Zenoo commented Aug 29, 2022

    I see, I will handle this as soon as I have time

    @Zenoo Zenoo self-assigned this Aug 29, 2022
    @AzzaAzza69
    Copy link

    This would do it:
    in the createLi()...

    I changed:

         // AzzaAzza69 : create without any attributes (including class!)
         const li = $(`<li><label>${opt.html()}</label></li>`);
    
         // +AzzaAzza69 : copy all attributes from original option to new list item
         for(attr of opt[0].attributes) {
           li[0].setAttribute(attr.name, attr.value);
         }
         li[0].classList.add('opt');
    ...
    // -AzzaAzza69 : new attribute copy will pull these across
    //          if (opt.attr('class'))
    //            li.addClass(opt.attr('class'));
    
    //          if (opt.attr('title'))
    //            li.attr('title', opt.attr('title'));
    ...
    
    

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    Development

    No branches or pull requests

    3 participants